CSS特殊性、继承与层叠-css教程-PHP中文网

首页

web前端

css教程

CSS特殊性、继承与层叠

黄舟

Dec 17, 2016 pm 01:29 PM

一、特殊性规则

选择器的特殊性由选择器本身的组件确定；特殊性由四个部分组成，其初始值为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>

页面显示如下：

QQ截图20161217133124.png

4. 行内样式的特殊性最高，为1，0，0，0。

5. 标记为!important的声明被称为重要声明，它没有特殊性，不过要与非重要声明分开考虑。

具体而言：非重要声明分为一组，它们之间的冲突使用特殊性解决；重要声明分为一组，它们之间的冲突内部解决；重要声明总是比非重要声明优先。

二、继承

1. 继承没有任何特殊性，记住这一点往往能明白很多问题。

请看如下代码：

<head> 
<style> 
p{ 
color:red; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p> 
</body>

页面效果：

QQ截图20161217133205.png

为什么设置了e388a4556c0f65e1904146cc1a846bee元素的颜色为红色，3499910bf9dac5ae3c52d5ede7383485元素的颜色却是蓝色？

这并不是因为3499910bf9dac5ae3c52d5ede7383485元素不继承父元素的颜色（原谅我之前就是这么认为的），而是因为3499910bf9dac5ae3c52d5ede7383485元素继承了e388a4556c0f65e1904146cc1a846bee元素的颜色，但是这个继承来的样式根本没有特殊性，然而浏览器默认样式中对3499910bf9dac5ae3c52d5ede7383485元素设置了样式，很明显浏览器默认样式的特殊性更高，于是3499910bf9dac5ae3c52d5ede7383485元素就按照浏览器默认样式显示。

2. 关于CSS中的继承：一般而言，只能子元素继承父元素的样式，也就是说样式在DOM中只能向下传递，不能向上；但是有一个例外，应用到body元素的背景样式可以向上传递到html元素，相应地可以定义其画布。

三、层叠

层叠规则：

1. 按权重排序。读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。

2. 权重相同的情况下，按照特殊性排序，特殊性越高的胜出。

3. 特殊性相同的情况下，按照样式表中的顺序排序，后出现的胜出。

btw，正是因为这个规则，才会使用LoVe-HA的顺序声明链接样式（LoVe-HA 依次为 :link; :visited; :hover; :active）。

以上就是CSS特殊性、继承与层叠的内容，更多相关文章请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn