乐趣区

关于css:CSS选择器以及权重顺序

jiezi

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}
退出移动版