在实际工作中,我们可能还是会有一些疑惑。当有多个选择器作用于一个元素时,哪个规则最终会应用到该元素?其实这是通过级联机制来控制的,这也和样式继承有关(元素从父元素中获取属性值)。CascadingCSS是CascadingStyleSheets的缩写,暗示层叠的概念非常重要。在最基本的层面上,它表明CSS规则的顺序很重要,但比这更复杂。哪个选择器在级联中获胜取决于三个因素(这些按权重排序——前者优先于后者):ImportanceSpecificitySourceorder(源顺序)重要性!important在CSS中,有一种特殊的语法允许规则始终优先于其他规则:!important。将它添加到属性值的末尾会使该语句非常强大。注意:覆盖此!important声明的唯一方法是在以后的源代码或具有更高特异性的源代码中包含相同!important属性的声明。知道!important的存在很有用,这样当您在其他人的代码中遇到它时,您就会知道它是什么。但!我们建议您永远不要使用它,除非绝对必要。您可能不得不使用它的一种情况是,当您在无法编辑核心CSS模块的CMS中工作时,并且您确实想要覆盖无法以其他方式覆盖的样式。但是,如果可以避免,请不要使用它。由于!important改变了级联的正常工作方式,调试CSS问题,尤其是在大型样式表中,会变得非常困难。请注意,CSS声明的重要性取决于它在哪个样式表中指定-用户可以设置自定义样式表以覆盖开发人员的样式,例如用户可能有视力障碍并希望为所有页面设置字体大小访问是双重的正常大小以便于阅读。冲突的声明将按以下顺序应用,后者覆盖较早的声明:用户代理样式表中的声明(例如:在没有其他声明的情况下浏览器默认样式)。用户样式表中的普通声明(由用户自定义样式设置)。作者样式表中的普通声明(这就是我们的样式,Web开发人员)。作者样式表中的重要声明用户样式表中的重要声明(最高优先级)Web开发人员的样式表覆盖用户样式表是合理的,因此设计保持预期,但有时用户有充分的理由覆盖Web开发人员样式,如上所述,这可以通过在用户规则中使用!important来完成。SpecificitySpecificity基本上是衡量一个选择器的具体程度——它匹配了多少元素。如上例所示,元素选择器的特异性非常低。类选择器更具体,因此将胜过元素选择器。ID选择器具有更高的特异性,因此将胜过类选择器。选择器具有的特异性的数量是根据四个不同的值(或分量)来衡量的,可以认为是千、百、十和个——四列中的四列简单数字:千:加1如果声明在样式属性中(此类声明没有选择器,因此它们的特异性始终为1000),则到此列。否则为0。百:为包含在整体选择器中的每个ID选择器向此列添加1分。十位:为整个选择器中包含的每个类选择器、属性选择器或伪类在该栏中加1分。单位位置:整体选择器中包含的每个元素选择器或伪元素在此列加1分。注意:通用选择器(*)、复合选择器(+、>、~、'')和否定伪类(:not)对特异性没有影响。示例选择器总值千位、百位、十位和个位h100010001#important01000100h1+p::first-letter00030003li>a[href*="zh-CN"]>.inline-warning00220022#importantdiv>div>a:hover,In一个元素的
