CSS特殊性、继承与层叠
一、特殊性规则
选择器的特殊性由选择器本身的组件确定；特殊性由四个部分组成，其初始值为0，0，0，0。
1. 对于选择器中的每一个id，加0，1，0，0；
2. 对于选择器中的每一个类、伪类、属性选择，加0，0，1，0；
3. 对于选择器中的每一个元素、伪元素，加0，0，0，1；
4. 结合符与通配符对于选择器的特殊性没有任何贡献。
注意：
1. 0，0，1，0的特殊性比0，0，0，13的特殊性更高。
2. 通配符 * 的特殊性为0，0，0，0，它是有特殊性的；结合符（比如h1+p中的“+”）根本没有特殊性；继承而来的样式也没有特殊性。
请看如下代码：
<head>
<style>
*{
color:red;
}
body{
color:cyan;
}
</style>
</head>
<body>
<p>Whatkindofcolorthisparawillbe?</p>
</body>页面显示如下：
4. 行内样式的特殊性最高，为1，0，0，0。
5. 标记为!important的声明被称为重要声明，它没有特殊性，不过要与非重要声明分开考虑。
具体而言：非重要声明分为一组，它们之间的冲突使用特殊性解决；重要声明分为一组，它们之间的冲突内部解决；重要声明总是比非重要声明优先。
二、继承
1. 继承没有任何特殊性，记住这一点往往能明白很多问题。
请看如下代码：
<head>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
</body>页面效果：
为什么设置了
元素的颜色为红色，元素的颜色却是蓝色？
这并不是因为元素不继承父元素的颜色（原谅我之前就是这么认为的），而是因为元素继承了 元素的颜色，但是这个继承来的样式根本没有特殊性，然而浏览器默认样式中对元素设置了样式，很明显浏览器默认样式的特殊性更高，于是元素就按照浏览器默认样式显示。 2.
关于CSS中的继承：一般而言，只能子元素继承父元素的样式，也就是说样式在DOM中只能向下传递，不能向上；但是有一个例外，应用到body元素的背景样式可以向上传递到html元素，相应地可以定义其画布。 三、层叠 层叠规则： 1. 按权重排序。读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。 2. 权重相同的情况下，按照特殊性排序，特殊性越高的胜出。 3. 特殊性相同的情况下，按照样式表中的顺序排序，后出现的胜出。 btw，正是因为这个规则，才会使用LoVe-HA的顺序声明链接样式（LoVe-HA 依次为 :link; :visited; :hover;
:active）。 以上就是CSS特殊性、继承与层叠的内容，更多相关文章请关注PHP中文网（www.php.cn）！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
vue中怎么用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
解释self ::，parent ::和static :: in php oop中的区别。
Apr 09, 2025 am 12:04 AM
在PHPOOP中，self::引用当前类，parent::引用父类，static::用于晚静态绑定。1.self::用于静态方法和常量调用，但不支持晚静态绑定。2.parent::用于子类调用父类方法，无法访问私有方法。3.static::支持晚静态绑定，适用于继承和多态，但可能影响代码可读性。
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
