初学者优先学习css

Css不是编程语言，而是描述语言。所以可以说，css非常容易理解，大多数人通过简单的学习就可以知道如何编写css代码来定义网页的样式。但是大多数人在编写css的过程中也有很多困惑，比如为什么自己编写的某个css没有生效，或者呈现出来的样式和预期的不一样，但是却不知道如何解决。

导致这些问题的主要因素是css优先级。Css优先级是css中最难的概念之一，但是掌握css是非常重要的。了解css优先级不仅有助于快速解决样式问题，还可以帮助我们在布局层面编写更清晰、更合理的css代码。

什么是css优先级

css的组成单位是CSS规则，单个样式规则的形式如下：

其中，选择器决定了哪些元素会受到后面编写的属性定义的影响，所以被称为选择器。

Css有一个核心特性。当多个样式规则中的相同属性(如填充)作用于同一元素时，这些样式将被覆盖：

图中前端调试工具显示的划掉的css样式不会出现在这里选择的网页元素上，因为它们已经被覆盖了。Css优先级是指在得出哪种样式规则应该覆盖其他样式规则的结论的过程中所遵循的原则。一般来说，高优先级的css样式会覆盖低优先级的css样式，成为最终网页元素的实际样式。

请注意，前端调试工具显示的“划掉”css样式不一定完全覆盖它。css中的一些组合属性(如margin，可分为上边距、右边距、下边距和左边距)在这种样式覆盖中遵循部分覆盖的原则，即使它们在前端调试工具中似乎被“完全划掉”了：

css优先级的影响因素

css优先级的影响因素要考虑三个部分：css选择器权重，重要标识符，属性继承。很多文章都阐述了css选择器的权重，但是后两部分很少被提及。本文将根据这三个部分进行详细说明。

属性继承

css中的一些属性是可继承的属性，比如文本颜色。讨论css的优先级，首先要认识到css中属性继承的影响。由于可继承属性的存在，网页元素的样式源可以分为两类：

css选择器直接为元素本身定义的样式。Css选择器不应用于父元素，而是继承自父元素的样式。为元素本身定义的样式(包括浏览器默认样式)必须比继承的样式具有更高的优先级。因此可以得出结论，继承的样式优先级最低，只要元素本身具有相同属性的样式定义，继承的值就可以随时被覆盖：

此外，继承的样式是最低优先级的事实忽略了继承的样式所在的样式规则的内容。也就是说，即使选择器的权重高于元素自身样式的选择器的权重(选择器权重~ :将在本文后面介绍)，连继承的样式也已经写好了！重要的是，继承的样式仍然会被元素本身的样式覆盖。

举个例子来说明。以下html:

Div id=' container ' p class=' note _ text ' ACG tofe-动画与前端技术的集成博客/对应div的p/css:

#容器{ color:darkblue}.note _ text { color : dark orange；}这部分在所有浏览器中的效果是：

添加到原来的css！重要信息：

#容器{color:darkblue！重要；}.note _ text { color : dark orange；}然后，你会发现效果在所有浏览器中保持不变：

当一个元素的多个父元素定义了继承样式时，这些继承样式的优先级是什么？此时优先级原则可以称为最近原则，即当存在多个继承样式时，层次关系最接近当前元素的父元素的继承样式优先级最高。同样，此时忽略样式规则的内容。

事实上，邻近原则并不是一个新的结论。想一想，如果把每一个父元素都作为当前元素，然后按照“元素本身的样式大于继承样式”的原则再进行推理，就可以理解为最近的父元素的继承样式优先级最高，这是非常合理的。

Css选择器权重

css选择器的权重是css优先级的核心概念。然而，在考虑css选择器的权重之前，请记住这个优先级原则中涉及的样式指的是元素本身中定义的样式。

每个样式规则的选择器不仅决定了这个样式规则会影响哪些元素，还作为浏览器判断css规则优先级的参考信息。Css选择器权重不是一个简单的内容，但是可以用简单直观的方式来解释。

Css选择器权重是一个数字游戏，比它的计算值更重要。计算权重大的样式规则将具有更高的优先级。可以想象一下龙珠里的战斗力衡量。在这场重量战中(这也是早期一篇关于css优先级的文章中使用的词)，战斗力最强的一个会赢。

衡量战斗力的方法是统计选择器中不同元素的个数，以(a、b、c、d)的形式进行判断。其中，abcd代表不同类型的选择器要素，战斗力处于不同数量级，A最强，D最弱。从弱到强，这四个字母代表的类别是：

元素选择器，伪元素d=1 (0，0，0，1)类选择器，伪类选择器，属性c=1(0，0，1，0) id选择器b=10)内联样式A=1 (1，0，0，0)此处对伪元素和伪类进行了补充。伪元素选择器意味着样式所作用的元素不是html结构中的实际元素，也就是说，它不是真正的dom元素。目前伪元素选择器只有5个：before，after，first-line，first-letter，selection。伪类选择器是指在css中加入冒号：实现动态效果和智能控制的选择器，如：hover、 th of-type(n)。从css3开始，双冒号：3360用于表示伪元素，单冒号：用于表示伪类。然而，为了与以前的浏览器兼容，css2中诞生的伪类选择器：after仍然允许使用单冒号。

现在，您可以找到一些css选择器来计算：

看完这些例子，请明白简单的分类计数是css中的战斗力衡量方法。(a、b、c、d)在这种形式中，abcd是不同数量级的，比较abcd和数字大小的方法是一样的，从高位开始，如果高位数字相同，则比较低的一位数字，以此类推。样式规则中具有最大选择器权重计算值的属性会覆盖其他样式规则中具有相同名称的属性。

如果你觉得你的计算很麻烦，请去特异性计算器，这是一个非常好的计算器。

在(A，b，c，d)中，A表示的内联样式实际上存在于html代码中，只能取0或1，因此与其他样式有很大的不同。虽然后面的bcd是不同数量级的，但细节上有什么区别？请参见火狐浏览器源代码的以下部分：

可以看到，类和id对应的十六进制值之间有两位数，所以在Firefox中，256(162)个类相当于一个id。这种级别差距在不同的浏览器中可能会有所不同。在写这篇文章的时候，Opera和Chrome使用的256的类不能大于id的权重。但是，这些细节并不重要，在实际使用中不能使用这个数量的选择器。因此，上面提到的重量计算方法应该被认为是可靠的。

如果权重的计算值相同，请输入下一阶段：样式定义序列。

样式定义的顺序

对于具有相同权重计算值的样式规则，定义顺序较低，优先级较高。这里的定义顺序包括静态样式定义的所有可能情况(不包括由javascript创建或由链接元素引入的样式)。比如直接写在html的style标签中的样式规则，通过link导入的css文件，以及@import导入的css文件。

请记住，只有当计算的权重相同时，才需要考虑样式定义的顺序。

！重要标识符

！重要是一个标识符，可以写在样式规则中的属性定义值之后，用于增强属性的样式定义的优先级。不同于决定整个样式规则优先级的css选择器的权重！重要仅影响其位置的单个属性。在优先原则中，重要可以理解为标识符高于A在以前的(A、b、c、d)结构中：

然后根据上面提到的css选择器权重的比较方法，就可以得到这种情况下的css优先级。具体来说，可以表达如下：

写好了！重要标识符的样式必须比没有标识符的样式具有更高的优先级。到处都写着呢！重要的标识符样式，然后根据一般css选择器的权重优先原则。css优先级的浏览器兼容性

虽然css优先级不是一个简单的内容，但幸运的是，几乎所有的浏览器都以一致的方式遵循css优先级原则，只有IE6和IE7例外，它们有几个bug具有优先级(详见IE Specificity bugs)。因此，css优先级是一个非常常见的概念，它可以应用于各种情况，而不用担心兼容性。

结论

这里介绍了css优先级的概念。本文还存在一些不足之处。如果你遇到一些新的问题，请到这里来讨论。在实际应用中，理解css的优先级并不意味着我们以这种方式分析每一个样式规则，而只是让我们有一个更清晰的状态，知道如何布局和控制我们编写的css。所谓“知己知彼，百战不殆”也是如此。

css的全称是层叠样式表，css优先级是这种“层叠”所遵循的原则，可见css优先级的重要性。最后，它以一个自制的数字结束：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。