首页 > 其他分享 >css继承性和层叠性

css继承性和层叠性

时间:2024-10-17 13:22:07浏览次数:8  
标签:就近 层叠 权重 样式表 继承性 选择器 css

css继承性和层叠性

css继承性

  1. 继承性:有一些属性,当给自己设置的时候,自己的后代都继承上了

css层叠性--计算权重

  1. 层叠性:就是css处理冲突的能力
  2. 当多个选择器,选上了同一个元素,权重要按照顺序
    • id选择器
    • 类选择器,伪类选择器,属性选择器
    • 标签选择器,伪元素选择器
  3. 权重相同时:就近原则(后者离得近用后者)

层叠性:权重计算总结

  1. 选择上了,数权重(id>类>标签)--》如果权重一样,就近原则
  2. 没有选择上,就近原则,谁近用谁--》如果一样近,比较选择器权重谁重--》如果权重一样,就近原则,谁近用谁

css样式表冲突总结

  1. 对于相同的选择器,排序:行级样式>内嵌样式表>外部样式表(就近原则)
  2. 对于相同的样式表,排序:ID选择器>类选择器>标签选择器
  3. 外部样式表的ID选择器>内部样式表的标签选择器

总结:就近原则,ID选择器的优先级最大

!important标记:优先级最高

  1. 给属性提高权重,无穷大
  2. !important提升的是一个属性,而不是一个选择器3
  3. !important无法提升继承的权重,该0还是0
  4. !important不影响就近原则

标签:就近,层叠,权重,样式表,继承性,选择器,css
From: https://blog.csdn.net/2401_83279223/article/details/142979240

相关文章

  • Tailwind CSS:最受欢迎的实用类CSS框架!Github Star达到了惊人的82.5K!
    在前端开发的世界中,随着项目的复杂性增加,如何高效管理样式,快速开发出响应式、美观的界面成为每个开发者关心的问题。TailwindCSS作为一个革命性的实用类(utility-first)CSS框架,以其灵活的样式管理方式赢得了广大开发者的青睐,目前是GitHub上Star数最多的CSS类框架,充分说明了......
  • 如何在CSS中修改滚动条样式
    修改滚动条样式在CSS中是一个有趣而常见的需求,特别是当你希望网页设计更加个性化时。虽然并不是所有浏览器都完全支持修改滚动条样式,但我们可以使用一些专门的CSS选择器来控制滚动条外观。以下是一个详细讲解,适合整理成博客发布。如何在CSS中修改滚动条样式在网页设计中,......
  • 前端入门学习之css盒子原则
    文章目录前端入门学习之css盒子原则引入块级元素:块级元素的特点占据整行设置高度和宽度包含其他元素盒子原则:margin:例子:boder:padding:前端入门学习之css盒子原则引入块级元素:当一个html标签元素展示方式为block,也就是它的display属性为block,那么我们可以想......
  • CSS网页布局(重塑网页布局)
    一、实现两列布局许多网站有一些特点,如页面顶部放置一个大的导航或广告条,右侧是链接或图片,左侧放置主要内容,页面底部放置版权信息等一般情况,此类网页布局的两列都有固定的宽度,而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分,即header区域、......
  • css盒子的定位(绝对定位)
    如何给定位盒子    想给盒子定位,必须提供三个要素,锚点、方向和距离。而盒子的相对定位,就是以元素本身的位置作为锚点。盒子定位的属性名和属性值        position:absolute;绝对定位的锚点        absolute是绝对定位元素,其锚点是父辈属性,即......
  • 前端新手教程:HTML、CSS 和 JavaScript 全面详解及实用案例
    一、引言在当今数字化的时代,前端开发扮演着至关重要的角色,它决定了用户与网页和应用程序交互的体验。HTML、CSS和JavaScript作为前端开发的核心技术,分别负责网页的结构、样式和交互。本教程将为前端新手全面深入地介绍HTML、CSS和JavaScript的知识点,并通过实用案例帮助......
  • 第六章 元素应用CSS
    6.1使用CSS设置字体样式6.1.1.字体类型CSS提供font-family属性来控制文本的字体类型。格式如下:font-family:字体名称;参数:字体名称按优先顺序排列,以逗号隔开。如果字体名称包含空格,则应用引号括起。说明:用font-family属性可控制显示字体。不同的操作系统,其字体名是......
  • 深入解析CSS中的!important规则
    深入解析CSS中的!important规则一、引言在CSS的世界里,样式的优先级通常由选择器的特异性、在样式表中的位置(后来的规则覆盖先前的规则)以及继承等因素决定。然而,!important规则就像一把双刃剑,它可以打破这些规则,赋予某些样式声明更高的优先级。本文将深入探讨!important的......
  • CSS伪元素详解
    CSS伪元素详解一、引言在CSS中,伪元素是一个非常强大的工具,它允许我们为元素的特定部分添加样式,而无需修改HTML结构。这不仅提高了样式的灵活性,还有助于保持代码的整洁和可维护性。本文将深入探讨CSS伪元素的使用方法和一些实用技巧。二、伪元素的基本概念1、伪元素的定......
  • CSS盒子模型(更新ing)
    目录一、概念盒子的尺寸二、盒子模型的属性1、块级元素和内联(行内)元素2、常见的块级元素3、常见的内联(行内)元素一、介绍概念在CSS视角下,所有HTML元素可以看作盒子。所谓的盒子在HTML中就是一个盛装元素内容的容器。盒子由内容区(content),内边距(padding),边框(border),外......