css选择器的特殊性

什么是css选择器的特殊性?

no can no bb...

每个合法的文档都会生成一个结构树,根据元素的祖先、属性、兄弟、后代元素等等来创建选择器,然后进行样式声明。当通过使用不同的选择器来选择同一个元素并声明一样的属性时,就会产生声明冲突,那么这时用户代理会计算选择器的特殊性,具有最高特殊性的声明胜出,也就是我们常提到的css选择器权重。

特殊性计算
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0。

  • 内联样式,加 1,0,0,0。
  • 对于选择器中给定的各个ID属性值,加 0,1,0,0。
  • 对于选择器中给定的各个类属性值、属性选择或伪类,加 0,0,1,0。
  • 对于选择器中给定的各个元素和伪元素,加 0,0,0,1。
  • 结合符和通配选择器对特殊性没有任何贡献。
    1
    2
    3
    4
    5
    6
    7
    8
    例:
    div {color:red} /* 特殊性 = 0,0,0,1 */
    :before {color:green} /* 特殊性 = 0,0,0,1 */
    .wrap {color:yellow} /* 特殊性 = 0,0,1,0 */
    [title] {color:blue} /* 特殊性 = 0,0,1,0 */
    :hover {color:pink} /* 特殊性 = 0,0,1,0 */
    #wrap {color} /* 特殊性 = 0,1,0,0 */
    * {color:#555} /* 特殊性 = 0,0,0,0 */

在任何情况下,用户代理都会确定哪些规则与一个元素匹配,计算出所有相关的声明及其特殊性,确定哪些规则胜出,然后将胜出的规则应用到元素,从而得到应用样式后的结果。

1
2
3
<div class="box"></div>
.box{ color: red}
div { color:green;background:#000}

chrome

注:通配符的特殊性为0,0,0,0(这个与根本没有特殊性是有区别的)。

继承

我们都知道有些声明不仅会应用到指定的元素,还会应用到它的后代元素,就是说声明继承给了后代。继承的值根本没有特殊性,比0,0,0,0还弱。之所以不要用通配符声明,是因为它的特殊性比继承强,会把本应该继承的声明干掉。

层叠

了解之后,有些人会问,如果特殊性相等的两个规则应用到同一个元素,怎么办呢?

css2.1层叠规则如下:

  • 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
  • 按显式特殊性对应用到该元素的所有声明排序,标志!important的规则的特殊性高于没有!important标志的规则(不推荐使用)。
  • 按特殊性对应用到给定元素的所有声明排序。有较高的特殊性的元素大于较低特殊性的元素
  • 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的特殊性越大。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。

注:在文档head的style里声明的样式是文档样式表一部分。

W3C标准推荐链接样式顺序为什么是这样的?

1
2
3
4
5
6
7
:link {color:#FF0000;} /* 未被访问的链接 */
:visited {color:#00FF00;} /* 已被访问的链接 */
:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时,请按照以下次序规则:
:hover 必须位于 :link 和 :visited 之后
:active 必须位于 :hover 之后

通过对特殊性的了解,我们知道以上的特殊性都是一样:0,0,1,0。
那么如果要达到我们想要的效果,可以按先后顺序,同样的特殊性,靠后的才会胜出。

结束
又是一个雾霾的双休日,与哥们见面吃了个饭,聊着天,看着他目前状态,很替他开心,呵呵,他懂得!

“毒死你个龟孙儿”用英语怎么说? Welcome to Beijing !
“恶心他妈在路边嗷嗷大哭”,路人问:“为什么哭啊?”,她回答:“因为恶心死啦…”。

谁家玉笛暗飞声,散入春风满洛城。
此夜曲中闻折柳,何人不起故园情。

掌阅科技前端开发 <br> --为者常成,行者常至