css中的优先级用什么属性

发表于前端技术学习版块 css,教程

CSS中的优先级是指当多个CSS规则当中具有相同选择器时，浏览器会根据优先级来决定使用哪一个规则。CSS中的优先级的重要性不言而喻，因为它会直接影响到我们网站的样式。在CSS中，有一些属性会比其他属性

CSS中的优先级是指当多个CSS规则当中具有相同选择器时，浏览器会根据优先级来决定使用哪一个规则。CSS中的优先级的重要性不言而喻，因为它会直接影响到我们网站的样式。在CSS中，有一些属性会比其他属性拥有更高的优先级。

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 以下三条规则的选择器都是 "body", 但是它们的优先级不同 */
  
    body { background-color: red; } /* 优先级为：0,0,1,0 */
    body { background-color: blue; color: white; } /* 优先级为：0,0,2,0 */
    body { background-color: green !important; } /* 优先级为：0,0,1,1 */  
  </style>
</head>
<body>
  <h1>CSS优先级的重要性</h1>
  <p>这里是一个段落。</p>
</body>
</html>

在样式中，可以通过以下方式计算优先级：

以!important声明的样式拥有最高的优先级。
如果两个样式都是以!important方式声明的，则优先级取决于它们的声明顺序。
在选择器的每个_ID_属性之前添加"1"，在每个_CLASS_或_属性_之前添加"0.1"，在每个元素之前添加"0.01"。这个值称为"特殊性"，具有更高特殊性的样式优先级更高。
如果两个样式都具有相同的特殊性值，则样式的优先级取决于其在样式表中的顺序。后面声明的样式将覆盖先前声明的样式。

总结而言，使用!important声明样式应该尽量避免，除非确实需要它来覆盖其他样式。应该尽可能地遵循良好的命名约定，为样式选择器分配有意义的ID，类和属性名称，使其具有更高的特殊性值。如果两个选择器具有相同的特殊性值，则应该让它们的声明顺序决定哪一个拥有更高的优先级。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。