Google Reader

重新认识CSS的权重 [11]

by Ghost

at 2011-08-19 18:43:44

original http://www.cssforest.org/blog/index.php?id=185

今天 大白 问了一个关于CSS权重的问题：

<blockquote>
    <p>关于选择器权重的问题 。class的权重是10  标签权重是 1  。比如说  p span{} 权重是2. 如果11标签自选择器的组合的权重11，会不会覆盖 一个class选择器权重10的 样式？</p>
</blockquote>

<p>在跟他的讨论中，重新整理了我对CSS权重的理解。</p>

<p>在《 <a href="http://www.cssforest.org/blog/index.php?id=161">样式的作用域──页面重构中的模块化设计（一）</a> 》中有做过总结，其中提到比较重要的两点：</p>

<blockquote>
    <p> <ol>
    <li>权值的大小跟选择器的类型和数量有关</li>
    <li>样式的优先级跟样式的定义顺序有关</li>
</ol></p>
</blockquote>

<p>在《 <a href="http://www.cssforest.org/blog/index.php?id=164">继承──页面重构中的模块化设计（三）</a> 》的评论中 <a href="http://www.operafans.net/">operafans</a> 也提到了 <cite>标签选择器的权值永远都比一个类选器择器的权值低，无论有多少个</cite> 但一直以来都还是没能想通。</p>

<p>其实规则很简单： <strong>比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数</strong> ，至于各级别的优先级，大家应该已经很清楚了，就是：</p>

<p><strong>important &gt; 内联 &gt; ID &gt; 类 &gt; 标签 | 伪类 | 属性选择 &gt; 伪对象 &gt; <del>继承 &gt; 通配符</del> <ins>通配符 &gt; 继承</ins></strong></p>

<p>这也就解释了为什么11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。</p>