CSS特殊性、继承与层叠
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
一、特殊性规则
选择器的特殊性由选择器本身的组件确定；特殊性由四个部分组成，其初始值为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>
页面显示如下：
关于通配符 * ：由于 * 适用于所有元素，而且有0特殊性，往往会在不经意间造成继承无法实现的情况，应该尽量避免使用 * 选择器。
3. 指定id属性的属性选择器与id选择器有本质区别，比如：
- <head>
- <style>
- div[id="test"]p{
- color:red;
- }
- #testp{
- color:cyan;
- }
- </style>
- </head>
- <body>
- <divid="test">
- <p>Whatkindofcolorthisparawillbe?</p>
- </div>
- </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>
页面效果：
为什么设置了<p>元素的颜色为红色，<a>元素的颜色却是蓝色？
这并不是因为<a>元素不继承父元素的颜色（原谅我之前就是这么认为的），而是因为<a>元素继承了<p>元素的颜色，但是这个继承来的样式根本没有特殊性，然而浏览器默认样式中对<a>元素设置了样式，很明显浏览器默认样式的特殊性更高，于是<a>元素就按照浏览器默认样式显示。
2. 关于CSS中的继承：一般而言，只能子元素继承父元素的样式，也就是说样式在DOM中只能向下传递，不能向上；但是有一个例外，应用到body元素的背景样式可以向上传递到html元素，相应地可以定义其画布。
三、层叠
层叠规则：
1. 按权重排序。读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。
2. 权重相同的情况下，按照特殊性排序，特殊性越高的胜出。
3. 特殊性相同的情况下，按照样式表中的顺序排序，后出现的胜出。
btw，正是因为这个规则，才会使用LoVe-HA的顺序声明链接样式（LoVe-HA 依次为 :link; :visited; :hover; :active）。
相关文章
- 下面小编就为大家带来一篇HTML5和CSS3实例教程总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-18
- 下面小编就为大家带来一篇老生常谈css中float的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-18
- 这篇文章主要介绍了CSS3实现iPhone滑动解锁功能代码的相关资料,需要的朋友可以参考下2016-07-18
- 响应式网站设计的理念就是页面的设计与开发应当根据用户行为以及设备环境进行相应的响应和调整，这篇文章就带大家简单了解一下响应式设计，感兴趣的小伙伴们可以参考一下2016-07-15
- 这篇文章主要介绍了CSS布局基础BFC 的相关资料,需要的朋友可以参考下2016-07-14
- 下面小编就为大家带来一篇创建新元素的三种方法小结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-18
最新评论