CSS特殊性、继承与层叠

所属分类: 网页制作 / CSS 阅读数: 1269
收藏 0 赞 0 分享

一、特殊性规则

选择器的特殊性由选择器本身的组件确定;特殊性由四个部分组成,其初始值为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中的“+”)根本没有特殊性;继承而来的样式也没有特殊性。

请看如下代码:

CSS Code复制内容到剪贴板
  1. <head>
  2. <style>
  3. *{
  4. color:red;
  5. }
  6. body{
  7. color:cyan;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>Whatkindofcolorthisparawillbe?</p>
  13. </body>

页面显示如下:

关于通配符 * :由于 * 适用于所有元素,而且有0特殊性,往往会在不经意间造成继承无法实现的情况,应该尽量避免使用 * 选择器。

3. 指定id属性的属性选择器与id选择器有本质区别,比如:

CSS Code复制内容到剪贴板
  1. <head>
  2. <style>
  3. div[id="test"]p{
  4. color:red;
  5. }
  6. #testp{
  7. color:cyan;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <divid="test">
  13. <p>Whatkindofcolorthisparawillbe?</p>
  14. </div>
  15. </body>

页面效果:

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

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

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

二、继承

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

请看如下代码:

CSS Code复制内容到剪贴板
  1. <head>
  2. <style>
  3. p{
  4. color:red;
  5. }
  6. </style>
  7. </head>
  8. <body>
  9. <p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
  10. </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)。

更多精彩内容其他人还在看

CSS伪类对象before和after的用法实例详解

这两个伪类对象只有在清楚浮动clearfix的时候会用到哈,最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
收藏 0 赞 0 分享

CSS3 实用技巧:实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码,感兴趣的朋友可以看下截图,希望对大家有所帮助
收藏 0 赞 0 分享

IE.JS解决IE兼容性问题方法汇总

正如标题所言它修复了许多的HTML和CSS问题,并使得透明PNG在IE5、IE6下正确显示,下面为大家介绍下具体针对不同浏览器的调用方法,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

实现CSS3中的border-radius(边框圆角)示例代码

本文为大家详细介绍下如何实现CSS3中的border-radius(圆角),具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

CSS line-height行高上下居中垂直居中样式属性

我们在css编写中需要对大篇幅的内容显示的更好看,有些间隔,不要在挤在一起难看,就可以使用Line-Height属性进行控制
收藏 0 赞 0 分享

CSS Float布局过程与老生常谈的三栏布局

这篇文章就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上。那就来老生常谈一次吧,CSS之Float布局
收藏 0 赞 0 分享

邮箱css加载失败怎么办 网站css加载异常原因分析

造成css加载失败的原因有很多,脚本之家也遇到过,这可能跟你代码出错,浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
收藏 0 赞 0 分享

CSS控制样式的三种方式(优先级对比验证)

大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式
收藏 0 赞 0 分享

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content=
收藏 0 赞 0 分享

Discuz7.2 IE9兼容性写法 杜工完全修补方案

因为Discuz7.2在IE9浏览器中有一系列的问题,所有要在以后的开发中考虑到ie9浏览器的一些问题了,这里简单介绍下,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多