[分享]css中class优先级

CSS中的class是给HTML元素添加样式的一种常用方式。然而，当多个class同时作用于同一个元素时，就涉及到了class优先级的问题。CSS中的class优先级是指，当多个class作用于同一个...

CSS中的class是给HTML元素添加样式的一种常用方式。然而，当多个class同时作用于同一个元素时，就涉及到了class优先级的问题。CSS中的class优先级是指，当多个class作用于同一个元素时，哪个class的样式会被应用到元素上。

CSS中的class优先级可以简单地表述为“就近原则”，即离目标元素最近的class优先级最高。但是，如果两个class的距离相等，则会按照下面的优先级规则进行排序：

 行内样式 > #id选择器 > .class选择器 > 标签选择器 

行内样式的优先级最高，意味着在HTML元素的style属性中定义的CSS样式会覆盖所有其他样式。例如：

 <p style="color: red;" class="text">我是红色的</p> 

上面的代码中，class为text，但是因为这个元素的style属性中定义了color为red，所以这个段落的字体颜色会是红色。

如果没有使用行内样式，那么下一个优先级最高的选择器是#id选择器。例如：

 #sidebar {
    background-color: #eee;
  } 

上面的代码用于给id为sidebar的元素添加背景色，如果有一个class为sidebar的元素存在，这个class的样式不会对这个id为sidebar的元素产生影响。

如果没有使用#id选择器，那么下一个优先级最高的选择器是.class选择器。例如：

 .section-title {
    font-size: 24px;
    font-weight: bold;
  } 

上面的代码用于给所有class为section-title的元素添加字体大小和加粗。如果存在多个class为section-title的元素，它们的样式会被同时应用。

最后，如果都没有定义上述三种选择器，那么标签选择器就会起作用。例如：

 p {
    text-align: center;
  } 

上面的代码用于给所有p标签添加文本居中的样式。

当然，还有其他因素会影响class的优先级，如继承和!important规则，但是以上提到的选择器优先级规则是CSS样式表的基础，并且是在大多数情况下都适用的。