CSS进阶——CSS特性与优先级

导航

1. 浅谈CSS中的选择器 | QT-7274
2. CSS选择器权重计算 | QT-7274 (qt7274.co)

CSS特性

CSS具有两大特性：继承性和层叠性。

继承性

CSS的继承性，是指子元素继承了父元素的某些样式特性。但不是所有属性都具有继承性。

在CSS中，具有继承性的属性有3类：

• 文本相关属性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing。
• 列表相关属性：list-style-image、list-style-position、list-style-type、list-style。
• 颜色相关属性：color

注意：**a元素本身有默认的颜色样式，优先级要比继承的颜色高。**如果要想改变a元素的颜色，必须选中a元素进行操作才行。当然，如果想要a元素也能继承父元素颜色的话，可以在a元素中使用“color:inherit;”来实现。

CSS的继承性，可以让我们少写很多代码，只要在父元素中定义了属性，就不需要在子元素中重复定义了，这样让CSS代码显得更加精简优雅，提高可读性和可维护性。

层叠性

如果在网页中，对于同一个元素，我们重复定义了多个相同的属性时，CSS应该如何处理？

CSS的层叠性，指的就是样式的覆盖。对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些样式具有相同的权重，CSS会以最后定义的属性值为准，也就是遵循“后来者居上”原则。

“后来者居上”原则必须符合以下3个条件才生效：

1. 元素相同
2. 属性相同
3. 权重相同

CSS优先级

CSS全称层叠样式表。很多人只知道CSS是用来控制样式的，并没有深入理解“层叠”这两个字的含义。

“层叠”，其实指的是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。当“同一个元素”的“同一个样式属性”被运用上多个属性值时，我们就需要遵循一定的优先级规则来选择一个属性值了。

对于样式覆盖发生的冲突，常见的共有以下5种情况：

1. 引用方式冲突
2. 继承方式冲突
3. 指定样式冲突
4. 继承样式和指定样式冲突
5. !important

引用方式冲突

CSS有3种常用的引用方式：外部样式、内部样式和行内样式。

这3种引入方式的优先级如下：

行内样式＞（内部样式=外部样式）

行内样式的优先级最高，内部样式与外部样式优先级相同。如果内部样式与外部样式同时存在，则以最后引用的样式为准（“后来者居上”原则。）

继承方式冲突

如果是由于继承方式引起的冲突，则“最近的祖先元素”获胜。祖先元素，指的是当前元素的父元素等。

指定样式冲突

所谓的指定样式，指的是指定“当前元素”的样式。当直接指定的样式发生冲突，样式权重高者获胜。

在CSS中，各种选择器的权重如下表所示：

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

常见的伪元素只有4个：::before、::after、::first-letter、::first-line。伪类我们经常见到，如hover、:first-child等。常见的选择器优先级如下。

行内样式＞id选择器＞class选择器＞元素选择器

注意：在CSS中，选择器的权重计算只针对指定样式（当前元素），并不能用于继承样式。

继承样式和指定样式冲突

当继承样式和指定样式发生冲突时，指定样式获胜。

!important

在CSS中，我们可以使用!important规则来改变样式的优先级。如果一个样式使用“!important"来声明，则这个样式会覆盖CSS中其他的任何样式声明。

如果你想要覆盖其他所有样式，可以使用!important来实现。

!important的用法

在CSS中，!important有以下两种常见的使用情况。

1. #someId p{color:red;}
   p{color:green;}
   

   这种情况下，如果不使用!important，则第一条样式永远比第二条样式优先级更高。

2. 如果写了一些很差的行内样式，但是又想在内部样式表或外部样式表修改这个样式，这种情况下，就需要在内部样式表或外部样式表中使用!important来覆盖那些行内样式。

如何覆盖!important

想要覆盖!important声明的样式很简单，共有两种解决方法。

1. 使用相同的选择器，再添加一条!important的CSS语句。

   不过这个CSS语句得放在后面，因为在优先级相同的情况下，后面定义的属性会覆盖前面定义的属性。

2. 使用更高优先级的选择器，再添加一条!important的CSS语句。

总而言之，对于CSS优先级的内容，主要掌握以下两条黄金定律即可：

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