网络日志

CSS选择器以及权重顺序

CSS选择器以及权重的设置

一个页面的搭建离不开css样式,而想要使用css对页面元素进行控制就需要用到css选择器。

按照引入方式可以说有内部样式(样式写到标签中的style里)、外部样式(样式通过引入外部的css文件)、内联样式(样式写在html文件中的style标签里)

按照选择器分类的话,常见的选择器有id选择器、类选择器、标签选择器、通配符选择器、派生选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="content" class="container">
    content1
    <div id="content2" class="container">
      content2
    </div>

  </div>

</body>
<style>
  /* div {
    color: red;
  } */

  #content {
    color: aquamarine;
  }

  .container {
    color: blue;
  }

  /* * {
    color: yellow
  } */

  div .container {
    color: rgb(224, 34, 215)
  }

  #content2 {
    color: burlywood
  }
</style>

</html>

不同的选择器,权重是不一样我们可以看到就上面的选择器而言

id>级联>class>标签>通配符

细致一点的话,再找几个例子的话,可以发现上面的并不完全正确

尤其是涉及到id跟级联这块

 div #content2 {
  color: rgb(9, 90, 45)
 }
 #content2 {
  color: burlywood
 }

可以发现,上面这种是第一个颜色显示出来,而不是根据id显示出来。

原因css通配符选择器效率低,因为css匹配的顺序不是从左向右,而是从右向左。使用通配符选择器时,浏览器会先匹配所有的元素,再进一步匹配其他规则,这样就导致了效率变低。

css的匹配规则是从右往左,也就是说,就上面的例子而言先匹配content2的元素,再匹配属于div的content元素。这样的话,即使存在下面的样式,也会被上面的覆盖掉。

至于通配符的话,他其实存在一些效率问题。毕竟匹配所有元素不如指定元素。

此外,针对class属性中有两个选择器的情况,优先级是按照定义顺序方式确定的。

<head>
  <meta charset="UTF-8">
 <title>Title</title>
</head>

<body>
  <div id="content" class="container">
 content1
    <div id="content2" class="container container2">
   content2
  </div>
 </div>
</body>
<style>
 .container2 {
  color: aqua
 }
 .container {
color: red
 }
</style>



</html>

也就是说交换上面.container和.container2的位置,字的颜色会发生变化,但是修改class=“container container2”为class=“container2 container“并不会改变字的颜色。

此外对于! important可以提高优先级值得提一下,一般不提倡使用,毕竟正常用上面的选择器有语义化,都能看懂,突然来了个插队的,怎么玩?

示例:class比id选择器更优先,因为加了个!important

 \#content {
  color: blueviolet
 }
 .container {
  color: aqua !important
 }