css区分权重

CSS中的权重是指在样式规则发生冲突时，浏览器选择应用哪个样式规则。

在CSS中，有四个选择器，它们的优先级是从低到高：

选择器       权重值--------------------------------标签选择器     1类选择器      10ID选择器     100CSS声明      1000

当样式规则冲突时，优先级高的样式将被应用。例如：

h1 {
     color: red;
 }
          /* 标签选择器，优先级为1 */.page-title {
     color: blue;
 }
      /* 类选择器，优先级为10 *//* 页面中的标题 */h1 class="page-title">
    这是一篇文章/h1>
/* 结果：标题的颜色为蓝色，因为.page-title的优先级比h1选择器高 */

如果样式规则的权重相等，则后面的规则会覆盖前面的规则。例如：

.page-title {
     color: blue;
 }
  /* 类选择器，优先级为10 */.page-title {
     color: green;
 }
     /* 类选择器，优先级为10 *//* 页面中的标题 */h1 class="page-title">
    这是一篇文章/h1>
/* 结果：标题的颜色为绿色，因为后面的规则覆盖了前面的规则 */

如果一个样式规则包含多个选择器，那么它的权重将根据它包含的选择器的优先级之和计算。例如：

h1.page-title {
     color: blue;
 }
     /* 标签选择器（1）+ 类选择器（10）= 11 *//* 页面中的标题 */h1 class="page-title">
    这是一篇文章/h1>
    /* 结果：标题的颜色为蓝色，因为h1.page-title的权重比.page-title高 */

需要注意的是，当两个样式规则的权重相等时，第二个规则将覆盖第一个规则，而不是两个规则都应用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！