CSS面试之选择器？看这一篇就够了

前言

这段时间在整理跟面试题相关的知识点，进行查缺补漏，然后自己对于CSS选择器这部分知识点只是有一些了解，所以这次专门梳理一下CSS选择器的知识点。下面我们就从面试官常问的几个问题开始入手

第一问：CSS选择器是什么

我们写页面的时候都知道，HTML页面的属性的各种样式是通过CSS来实现的。要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。

一个完整css属性选择器是由css命名及后面属性及属性值构成，{}前的部分是选择器，如下面的.head，{}内的部分是样式,如color:#fff。

.head {
  color:#fff
}
复制代码

第二问：CSS选择器有哪些

CSS中有五大选择器，分别是通配符选择器，元素/标签选择器，类选择器，ID选择器，属性选择器

一.通配符选择器

实际上，通配符选择器我们在开中经常会使用到，它同一个 * 表示，使用 * 作为选择器时，它能与 HTML 中所有元素进行匹配，比如下面我们常在页面中设置的通配符选择器

* {
  margin:0;
  padding:0;
}
复制代码

上面这个选择器就是将浏览器中对所有元素自带的 margin 值和 padding 值全部设置为0

通配符选择器也可以用于选择某个元素下的所有元素,下面代码就是选中div的head类下所有元素，设置这些元素的背景色为红色

<style>
    div.head * {
      color: red;
    }
</style>
<div class="head">
    <p>我是 通配符 1号</p>
    <p>我是 通配符 2号</p>
</div>
复制代码

二.元素选择器

元素选择器几乎是我们最常用的选择器了，在HTML文档中该选择器通常是指某种HTML元素

h3 {
    color:blue;
}
<h3>我是元素选择器</h3>
复制代码

上面代码是选中所有 span 元素，将它们的内容颜色设置为蓝色，类似的还有很多，例如：p,h2,a,div乃至html。

三.类选择器

类选择器分为两种，单类选择器和多类选择器

单类选择器

使用元素选择器直接对元素进行操作可能还不够精细，这时我们可以使用类选择器直接对元素中的类进行样式设置。单类选择器的使用方法是元素名后加上 .类名，比如下面

h3.one {
  color:yellow;
}
<h3 class="one">我是单类选择器</h3>
复制代码

当前缀的类名长的时候，我们也可以省略，直接用类名进行选择

.one {
  color:yellow;
}
<h3 class="one">我是单类选择器的省略</h3>
复制代码

多类选择器

实践开发中，元素中的类名可能不是一个单词，而是一长串单词，各个单词之间用空格分开。在解释多类选择器之间我们先认识一下单类选择器会出现的一种情况。

当你的类名包含两个或以上的单词时，假设为 class=”first study”，
这时使用两个单类选择器 .first { color=”white” } .study { font-size:10px } ,这两个单类选择器会根据类选择器名对类名存在的单词进行检索，这里两个单类选择器都成功检索，所以最后的内容会将这两种样式都呈现出来。

现在，我们来看看多类选择器
看下面情况,当我们想直接对第三条 p 标签进行样式设置时，可以设置两个类名的限制条件，即 .first.study ，类名只要拥有这两个单词就能使用样式，这与单词顺序无关，因为写成 .study.first 效果也是一样的。我们可以将元素选择器与多类选择器结合使用，在多类选择器前加上元素名就可以匹配指定元素的指定类名，比如 h4.first.study

.first {
  color:blue
}
.study {
  color:green
}
.first.study {
  color:pink
}
<h4 class="first">我是多类选择器1</h4>
<h4 class="study">我是多类选择器2</h4p>
<h4 class="first study">我是多类选择器3</h4>
复制代码

四.ID 选择器

只从代码中看，或许我们会觉得ID选择器与类选择器有些类似，那么为什么我们有了类选择器还需要ID选择器呢？我们先从类和ID的区别来看一下，一个元素可以拥有多个类，却只能有一个唯一ID，一个ID值在整个HTML中只能设置一次，不能重复设置和出现，所以ID值也是一个元素的唯一值（注意，不是一类元素，而是一个元素的唯一值），我们想要对同元素名同类名的几个元素进行不同的操作时，就需要使用到 ID选择器了

ID选择器的写法是 # + ID值

#one {
  color:blue
}
#two {
  color:yellow
}
#three {
  color:red
}
<h5 class="first" id="one">我是ID选择器1</h5>
<h5 class="first" id="two">我是ID选择器2</h5>
<h5 class="first" id="three">我是ID选择器3</h5>
复制代码

从图中可以看出，我们用ID选择器实现了对同元素名同类名的几个元素的不同颜色的设置

五.属性选择器

属性选择器可以让我们直接对元素中的属性进行选中然后根据条件对该元素进行属性设置

1.简单属性选择器

根据一个元素中的具体属性进行选择，使用方法：元素名[属性名] 或 *[属性名]，
下面给出一个例子，选择含有href属性的所有h2标签

a[href] {
  color:red
}
<a href="">www.baidu.com</a>
复制代码

与多类选择器同理，我们也可以设置多个属性选择条件，如 a[href][title]

a[href][title] {
  color:red
}
<a href="" title="">www.baidu.com</a>
复制代码

2.具体属性值选择器

如果我们相对属性进行更加精确的选择，那么你可以试试这个
<a href="https://juejin.cn/post/www.baidu.com">www.baidu.com</a>
这里需要注意一点，选择器对于具体属性的值是进行顺序检索的，实质上是进行子符串匹配，所以我们不能用非顺序的属性值进行选择，比如
a[href="https://juejin.cn/post/.baidu.comwww"] 就无法匹配到。具体属性值同样可以设置多个匹配条件
例如：a[href="https://juejin.cn/post/www.baidu.com"][title="0000"] ,选择href属性为www.baidu.com，title属性为0000的元素

3.部分属性值选择器

如你所见，使用具体属性匹配会让选择变得繁琐且多余，因为对元素进行如此精细的匹配，我为什么不考虑 ID选择呢？事实上，我们处理的更多的情况往往是选择在一串属性值中出现了某个关键字的元素，例如，我们需要选择所有属性名中包含了second的 h1 元素 h1[class~=second] , ~ 表示包含后面的字符串匹配

h1[class~=second] {
  color:pink
}
<h1 class="second 1">我是部分属性值选择器1</h1>
<h1 class="second 2">我是部分属性值选择器2</h1>
<h1 class="second 3">我是部分属性值选择器3</h1>
复制代码

小扩展：当你对class这个属性选择时，你会发现使用类选择器 .second 实现的效果也可以达到上面的效果

上述代码中，我们写class类名时进行了空格，只有这样才能进行部分属性值匹配，
class="second1 与 class="second-1 都无法进行匹配，对于后者的情况，我们可以使用子串匹配属性选择器

h2.class^=”second” ,匹配以属性值second为开头的h2元素
h2.class$=”second” ,匹配以属性值second为结尾的h2元素
h2.class*=”second” ,匹配包含属性值second的h2元素

h2[class^=second] {
  color:pink
}
h2[class$=second] {
  color:pink
}
h2[class*=second] {
  color:pink
}
<h2 class="second-1">我是部分属性值选择器3</h2>
<h2 class="2-second">我是部分属性值选择器4</h2>
<h2 class="1-second-2">我是部分属性值选择器5</h2>
复制代码

部分属性选择器的功能是十分强大的，甚至，甚至只要我们想的话，h2.class*=”s”，就可以完成对所有属性值为 second 的选择

以上，就是各种选择器的认识和了解，下面我们要开始介绍重头戏也是面试官常问的考点——选择器的优先级了
下面是示例用到的代码

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.head * {
      color: red;
    }

    h3 {
      color: blue;
    }

    h3.one {
      color: yellow;
    }

    .second {
      color: burlywood;
    }

    .first {
      color: blue
    }

    .study {
      color: green
    }

    .first.study {
      color: pink
    }

    #one {
      color: blue
    }

    #two {
      color: yellow
    }

    #three {
      color: red
    }

    a[href] {
      color: red
    }

    a[href="https://juejin.cn/post/www.baidu.com"] {
      color: black
    }

    h1[class~="second"] {
      color:pink
    }
    h2[class^="second"] {
      color:pink
    }
    h2[class$="second"] {
      color:pink
    }
    h2[class*="second"] {
      color:pink
    }
    
  </style>
</head>

<body>
  <div class="head">
    <p>我是 head 1号</p>
    <p>我是 head 2号</p>
  </div>
  <hr>

  <div>
    <h3>我是元素选择器</h3>
  </div>
  <hr>

  <div>
    <h3 class="one">我是单类选择器</h3>
    <h3 class="second">我是单类选择器的省略</h3>
  </div>
  <hr>

  <div>
    <h4 class="first">我是多类选择器1</h4>
    <h4 class="study">我是多类选择器2</h4>
    <h4 class="first study">我是多类选择器3</h4>
  </div>
  <hr>

  <div>
    <h5 class="first" id="one">我是ID选择器1</h5>
    <h5 class="first" id="two">我是ID选择器2</h5>
    <h5 class="first" id="three">我是ID选择器3</h5>
  </div>
  <hr>

  <div>
    <a href="" title="">www.baidu.com</a>  <br>
    <a href="https://juejin.cn/post/www.baidu.com">www.baidu.com</a>
  </div>
  <hr>

  <div>
    <h1 class="second 1">我是部分属性值选择器1</h1>
    <h1 class="second 2">我是部分属性值选择器2</h1>
    <h1 class="second 3">我是部分属性值选择器3</h1>
  </div>
  <hr>

  <div>
    <h2 class="second-1">我是部分属性值选择器3</h2>
    <h2 class="2-second">我是部分属性值选择器4</h2>
    <h2 class="1-second-2">我是部分属性值选择器5</h2>
  </div>
</body>

</html>
复制代码

第三问：选择器的优先级是怎样的？它们是怎么进行计算的？

选择器优先级的认识

我们在上面聊到了，CSS选择器包括行内样式、id选择器、class选择器、标签选择器。上面几种选择器的优先级优先级依次降低，另外，在选择器中使用!important 可让选择器的优先级提升。
为什么我们要对选择器引入优先级的概念？试想一下，如果我们对一个P标签的ID选择器设置了红色，对它的类选择器设置了黄色，对它的元素选择器设置了蓝色，那么P标签的颜色不是要打架吗，所以我们需要对选择器进行优先级的设置，哪个优先级更高，就执行哪个选择器。

为了给选择器进行优先级比较，我们对每种选择器都分配了权重

!impotant 权重为正无穷
行内样式权重为 1000
ID选择器权重为 100
类选择器/伪类选择器/属性选择器权重为 10
标签选择器权重为 1
通配符选择器/子类选择器/兄弟选择器权重为 0
继承的样式没有权重

总结：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

选择器的比较规则

权重大的选择器优先于权重小的选择器
权重可以进行叠加，如一个main类与一个P标签： .main p {} 这里选择器的权重为11
权重相同时，选择后面的选择器，将前面的样式进行覆盖
通配符、子选择器、兄弟选择器的权重为 0000，但是它们的权重高于继承样式的权重

下面给出一个例子来更加形象的分析选择器的权重

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {     /* 0  */
      margin: 0;
      padding: 0;
    }
    .container {   /* 类选择器 10 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #study {       /* ID选择器 100 */
      color: black;
    }
    .head {           /* 类选择器 10 */
      color: blue;
    }
    p {           /* 元素选择器 1 */
      color: violet;
    }
   
    .head p {       /* 类选择器 10 + 元素选择器 1 = 11 */
      color: orangered;
    }
    .head p[class="one"] {   /* 类选择器 10 + 属性选择器 10 = 20 */
      color: saddlebrown;
    }
    div.head p[class="two"] { /* 元素选择器 1 + 类选择器 10 + 属性选择器 10 = 21 */
      color: rgb(47, 218, 123);
    }
    div.head p[class="three"] { /* 元素选择器 1 + 类选择器 10 + 属性选择器 10 = 21 */
      color: rgb(87, 112, 126);
    }
    div.head p[class="four"] { /* 元素选择器 1 + 类选择器 10 + 属性选择器 10 = 21 */
      color: rgb(176, 45, 180);
    }
    .five {   /* !important 无穷大 */
      color: rgb(82, 162, 228) !important;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="head" id="top">
      <p style="font-size: 20px; color: rgb(9, 87, 48);" id="study">我要开始学习啦！</p>
      <p class="one">周一打王者</p>
      <p class="two">周二打LOL</p>
      <p class="three">周三打吃鸡</p>
      <p class="four">周四打原神</p>
      <p class="five">周五打阴阳师</p>
      <p>周末steam全家桶</p>
    </div>
  </div>
</body>
</html>
复制代码

分析

我们从上面可以看出

我要开始学习啦！

它的颜色，被 #study，.head ， p ， .head p 等选择器以及行内样式所选中，由于行内样式的权重为1000，是这里面最高的，所以执行行内样式的颜色

周一打王者

它的颜色，被 #study， .head ， p ， .head p ， .head p[class=”one”] 这些选择器所选中，由于 .head p[class=”one”] 的权重为20，为最高，执行它的样式。

其他元素同理

小结

以上，就是CSS选择器的优先级比较啦，这篇文章大体梳理了什么是CSS选择器，CSS的各种选择器以及各种选择器之间的优先级比较，通过对CSS选择器的初步认识一步一步的深入优先级比较，帮助你更好的认识CSS选择器，如果觉得对你有所帮助的话欢迎点赞，当然，由于本人水平有限，可能文章还存在不少纰漏，希望发现问题的小伙伴可以在评论区指出

文章版权归作者所有，未经允许请勿转载。

THE END

前端