css优先级算法

最新推荐文章于 2024-07-05 07:26:33 发布

JJ_Smilewang

最新推荐文章于 2024-07-05 07:26:33 发布

阅读量1.3k

点赞数 3

分类专栏： html5和CSS3基础文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124032799

版权

html5和CSS3基础专栏收录该内容

16 篇文章 2 订阅

订阅专栏

我们在书写代码时，有时会出现不起效果，那么此时要么是代码本身存在问题，要么就是存在优先级问题。今天的文章主要介绍下优先级的算法。

选择器的优先级顺序是由各个选择器的权重决定的。具体如下表：

选择器	权重值
!important	infinity(无穷大)
行内样式 style" "	1000
id选择器	100
class类选择器、属性选择器、伪类选择器	10
标签（元素）选择器	1
通配符（*）选择器	0

其实权重是有4组数字组成的，上表上的权重值，是我为了方便大家记忆和理解而写的具体值。

<style>
  div {
    color: blue;
    color: red;
  }
    </style>
<body>
    <div>我是div</div>
</body>
最后的样式如左图，这说明css具有层叠性，即优先级就近原则，同权重情况下样式定义以最近者为准！
<style>
  .b {
    color: green;
  }
  div {
    color: blue;
  }
    </style>
<body>
    <div class="b">我是div</div>
</body>
最后的样式如左图，这说明类选择器的权重高于标签选择器。（因为类在上面最后还是采用了它的样式）
<style>
  #a {
    color: purple;
  }
  .b {
    color: green;
  }
  div {
    color: blue;
  }
    </style>
<body>
    <div id="a" class="b">我是div</div>
</body>
最后的样式如左图，这说明id选择器的权重高于类选择器和标签选择器。（因为id在最上面最后还是采用了它的样式）
<style>
  #a {
    color: purple;
  }
  .b {
    color: green;
  }
  div {
    color: blue;
  }
    </style>
<body>
    <div id="a" class="b" style="color: black;">我是div</div>
</body>
最后的样式如左图，这说明内联样式的权重高于id选择器、类选择器和标签选择器。
<style>
  #a {
    color: purple;
  }
  .b {
    color: green;
  }
  div {
    color: blue!important;
  }
    </style>
<body>
    <div id="a" class="b" style="color: black;">我是div</div>
</body>
最后的样式如左图，这说明!important的权重高于所有其他选择器。

通过上面的代码演示，可以得到单个选择器之间的优先级顺序如下：

!important >内联样式> id选择器> class类选择器 > tag(标签选择器)

在我们实际开发中，经常使用复合选择器，此时则会有权重叠加，需要计算权重。

 <style>
    /* 权重为1+100 */
    body #b {
      background-color: blue;
    }
    /* 权重为100 */
     #b {
       background-color: pink;
     }
    /* 权重为1+10 */
    body .a {
      background-color: green;
    }
    /* 权重为10 */
    .a {
      background-color: red;
    }
</style>
<body>
    <div class="a" id="b">我是div </div>
</body>

复合选择器权重的叠加就是简单的相加，比如一个类选择器+标签选择器，那么他们的权重就是10+1=11；再比如一个id选择器+标签选择器，那么他们的权重就是100+1=101，以此类推！

因此，首先要明确各个选择器的权重值，这样使用复合选择器时就能通过相加得到其权重值。在实际开发中，一定要注意考虑css的优先级，避免所设置的样式无效。