3.css优先级

3.CSS优先级

css全称层叠样式表，很多人只知道css是用来控制样式的，并没有深入理解“层叠”这两个字的含义。
“层叠”其实指的是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。当“同一个元素”的“同一个样式属性”被运用上多个属性值时，我们就需要遵循一定的优先级规则来选择一个属性值。
对于样式覆盖发生的冲突，常见的有以下5种情况。

• 引用方式冲突
• 继承方式冲突
• 指定样式冲突
• 集成央视和指定样式冲突
• ！important

1.3.1 引用方式冲突

我们知道css有3种常用的引用方式：外部样式、内部样式和行内样式。css因引入方式的不同，也会产生冲突。这3种引入方式的优先级如下。
行内样式>(内部样式=外部样式)
行内样式的优先级最高，内部样式与外部样式优先级相同。如果内部样式与外部样式同时存在，则以最后引用的样式为准。（“后来者居上”原则。）

1.3.2 继承方式冲突

如果是由于继承方式引起的冲突，则“最近的祖先元素”获胜。继承，指的是css的继承性。祖先元素，指的是当前元素的父元素、爷元素……
分析：由于继承方式引起了冲突，因此最近的祖先元素进行继承。

1.3.3 指定样式冲突

所谓的制定样式，指的是指定“当前元素”的样式。当直接指定的样式发生冲突时，样式权重高者获胜。
在css中，各种选择器的权重如表1-3所示。
表1-3 选择器权重

选择器	权重
通配符	0
伪元素	1
元素选择器	1
class选择器	10
伪类	10
属性选择器	10
id选择器	100
行内样式	1000

常见的伪类元素只有四个： ：：before、：：after、：：first-letter和：：first-line。伪类我们常见到，如hover、：first-child等。
常用的选择器优先级:行内样式>ID选择器>class选择器>元素选择器。
ID选择器权重最高，这里需要注意一点，我们不应该只从样式顺序来判断。因为只有选择器权重相同时，才会遵循“后来者居上”原则。

1.3.4 继承样式和指定样式冲突

当继承样式和指定样式发生冲突时，指定样式获胜。对于样式冲突，我们不能笼统的都用权重来计算，在css中，选择器权重的计算只针对于指定样式（当前元素），并不能用于继承样式。当继承样式和指定样式发生冲突时，指定样式获胜。我们应该先判断指定样式，然后再去考虑继承样式。

1.3.5 ！important

在css中，我们可以使用！important规则来改变样式的优先级。如果一个样式使用“！important”来声明，则这个样式会覆盖css中其他任何样式声明。如果你一定要使用某个样式属性值，为了不让他被覆盖，则可以使用！important来实现。换句话来说，如果你想要覆盖其他所有样式，可以使用！important来实现。

不管前面有什么选择器，权重在这里不起作用。颜色最终会是黑色。

1.！important的用法
情况一：就是上面的情况，需要摘出来一个元素，不继承其他选择器定义的元素特性，就需要使用！important。
情况二：如果别人写的行内样式不理想，想要修改，就可以在内部样式或者外部样式中使用！important来覆盖行内样式。
2.如何覆盖！important
方法一：使用相同的选择器，再添加一条！important的css语句。不过这个css语句需要放在后面。因为在优先级相同的情况下，后面定义的属性会覆盖前面定义的属性。（“后来者居上”原则）
方法二：使用更高优先级的选择器，再添加一条！important的css语句。
总而言之，对于css优先级的内容，主要掌握以下两条黄金定律即可。

• 优先级高的样式覆盖优先级低的样式
• 同一优先级的样式，后定义的覆盖先定义的，即“后来者居上”原则。