CSS 层叠规则_html/css_WEB-ITnose-html教程-PHP中文网

CSS 层叠规则_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:13:29

原创

1413人浏览过

CSS 规则特殊性计算

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

对于选择器中给定的各个id属性值，加0,1,0,0. 对于选择中给定的各个类属性值，属性选择或伪类，加0,0,1,0. 对于选择器中给定的各个元素和伪元素，加0,0,0,1. 结合符合通配符选择器对特殊性没有任何贡献

比较规则
因为值是从左向右排序的，所有1,0,0,0大于以0开头的所有特殊值，而不论后面的数是什么。比如，0,0,1,0比值0,0,0,13更高。

通配符的特殊性为0,0,0,0.对特殊性没有贡献。

id选择器和id属性的属性选择器特殊值分别为，0,1,0,0，和0,0,1,0.因此id属性的属性选择器比较低。

内敛声明的特殊性为1,0,0,0是最高的。
为内敛样式声明保留一位，这是CSS2.1才新增的，这样做是为了反映写CSS2.1当时的web浏览器表现。在CSS2中，内联样式声明的特殊性是1，0,0（特殊性包含3个值，而不是4个）。它与ID选择器的特殊性相同，所以ID选择器很容易覆盖内联样式。

立即学习“前端免费学习笔记（深入）”；

!import重要性
标志为 !important的声明并没有特殊的特殊值，不过要与非重要的声明分开考虑。实际上，所有!important的声明会分组在一起，重要声明的特殊性冲突会在重要声明内部解决，而不会与非重要声明想混。类似地，我们认为所有非重要声明也归为一组，使用特殊性来解决。如果一个重要声明和一个非重要声明冲突，胜出的总是重要声明。

继承
大多数的和模型设置是不能够继承的。继承的值根本没有特殊性，甚至连0特殊性都没有。而0特殊性要比无特殊性要强。

* {color：gray}h1#page-title {color:black;}<h1 id="page-title">Meerkat <em>Central</em></h1><p>Welcome to the best place on the web for meerkat information</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/947">
                            <img src="https://img.php.cn/upload/jscode/000/000/001/5987e583506d2283.jpg" alt="不规则形状排列的css菜单导航">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/947">不规则形状排列的css菜单导航</a>
                            <p>不规则形状排列的css菜单导航</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="不规则形状排列的css菜单导航">
                                <span>58</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/947" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="不规则形状排列的css菜单导航">
                        </a>
                    </div>

登录后复制

em里面继承了h1的color，但是由于没有特殊性，所以被特殊性为0,0,0,0的通配符打败。颜色为灰色。
这个例子说明了不加区别的使用通配符选择器可能存在的问题之一。由于它能匹配任何元素，所以通配符选择器往往有一种短路继承的效果。这个问题可以解决，不过通常更合理的做法是从一开始就避免不加区别地使用通配符选择器，从而从根本上避免这个问题。
继承制完全没有特殊性，这一点很关键，决不能等闲视之。例如，架设一个样式表编写如下，使"工具条"中所有的文本都是黑底白字：

    #toolbar {color : white;background:black;}

登录后复制

只要id为toolbar的元素只包含纯文本而不包含其他内容，这就能正常起作用。不过如果这个元素的文本都是超链接，用户代理的超链接样式就会占上风。在一个web浏览器中，这意味着他们的颜色很可能是蓝色，因为浏览器的样式表可能包含以下规则：

    a:link {color : blue;}

登录后复制

为克服这个问题，必须如下声明：

    #toolbar {color : white ; background : black;}    #toolbar a:link {color : white;}

登录后复制

层叠
特殊性相等的两个规则同事应用到同一个元素的层叠规则：

找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。按显示权重对应用到该元素的所有声明排序。标识!important的规则权重要高。按照来源对应用到给定元素的所有声明排序。共有3中来源：创作人员，读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有!important标识的读者样式要强于所有其他样式，这包含有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素胜出。按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，他的权重越大。如果样式表有导入的样式表，一般认为出现导入样式表中的声明在前，住样式表中的所有声明在后。

正式由于这种顺序排序，所以才有了通常推荐的链接样式顺序。一般建议按照link-visited-hover-active(LVHA)的顺序声明链接样式。

非CSS表现提示
文档有可能包含有非CSS的表现提示，例如font元素。非CSS提示被处理为特殊性为0，并出现在创作人员样式表的最前面。只要有创作人员或者读者样式，这种表现提示就会被覆盖，但是用户代理的样式不能将其覆盖。