面试官：css中的选择器有哪些？说说优先级？

省流版：

1. id选择器
2. 类名选择器
3. 标签选择器
4. 后代选择器
5. 子级选择器
6. 相邻兄弟选择器
7. 群组选择器
8. 属性选择器
9. 伪元素选择器
10. 伪类选择器

优先级：!important > 内联( style="color: red;" ) > id选择器 > 类名选择器 > 标签选择器

废流版：

1. ID选择器

ID 选择器以"#"开头，用于选择具有特定 id 属性的元素。它拥有最高的优先级。

<div id="box">
  Hello, this is a box.
</div>

#box {
  color: red;
}

2. 类名选择器

类名选择器以"."开头，用于选择具有特定 class 属性的元素。

<div class="wrap">
  Hello, this is a wrap.
</div>

.wrap {
  font-weight: bold;
}

3. 标签选择器

标签选择器直接使用 HTML 标签名称，用于选择特定的 HTML 标签。

<p>
  This is a paragraph.
</p>

p {
  font-style: italic;
}

4. 后代选择器

后代选择器用于选择某个元素内部的后代元素，并通过空格分隔，它会选中所有的后代。

<div id="app">
    <div>
        1号.
        <div>
            1.1号
        </div>
    </div>
    <div>2号</div>
    <div>3号</div>
  </div>

#app div{
    color: red;
    }

效果：

5. 子级选择器

子级选择器（子元素选择器）使用">"符号，用于选择作为某个元素子元素的元素，注意只可选择直接子代而不能选择子代的后代。

<div id="app">
    <div class="box1">
        1号.
        <div class="box11">
            1.1号
        </div>
    </div>
    <div class="box2">2号</div>
    <div class="box3">3号</div>
  </div>

#app>.box3 {
    width: 50px;
    height: 50px;
    border: 1px solid red;
}
/* 若是以下这种写法则不生效 */
#app>.box11 {
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

效果：

6. 相邻兄弟选择器

相邻兄弟选择器使用"+"符号，选择紧接在另一个元素后面的元素，不相邻不选择。.box1 + .box2 选择器只会选择紧接在 .box1 元素后面的 .box2 元素，并应用对应的样式。其他与 .box2 不相邻的元素不受该选择器的影响。.box1 + .box2 的样式为 background-color: red;，所以只有紧接在 .box1 后面的 .box2 元素的背景色会变成红色。其他元素（如 .box1 和 .box3）不受这个选择器的影响，它们的样式保持原样。

.box1,
.box2,
.box3 {
    width: 30px;
    height: 30px;
    border: 1px solid black;
}

.box1+.box2 {
    background-color: red;
}

/* 若是以下这种写法则不生效 */
.box1+.box3 {
    background-color: red;
}

.box1 + .box2 {
  border: 2px solid #ea490e;
}

效果：

7. 群组选择器

群组选择器通过逗号","将多个选择器组合在一起，同时选中它们所匹配的元素。

<div id="app">
    <div class="box1">1号</div>
    <div class="box2">2号</div>
    <div class="box3">3号</div>
</div>

.box1,
.box2,
.box3 {
    width: 30px;
    height: 30px;
    border: 1px solid black;
}

效果：

8. 属性选择器

属性选择器根据元素的属性及属性值来选择元素。

<input type="text">
<input type="text" abc="abc">

input[abc='abc'] {
  background-color: yellow;
}

效果：

9. 伪元素选择器

伪元素选择器用于向某些选择器选中的元素添加特殊效果。

<div id="input">这是一个div</div>

#input::before {
    content: '这是div前面';
    display: block;
}
#input::after {
    content: '这是div后面';
    display: block;
}

效果：

10. 伪类选择器

伪类选择器用于向元素的特殊状态应用样式，如:hover、:active等。

<div id="input">这是一个div</div>

#input {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
#input:hover {
    background-color: yellow;
}

效果：当鼠标移动到id="input"的div区域中测触发hover的黄色背景色效果。

优先级

在 CSS 样式表中，如果多个选择器同时应用在一个元素上，它们的优先级决定了哪个样式会被应用。

• !important：具有最高优先级，即使后面有其他规则也会被覆盖。
• 内联样式（如style="color: red;"）：其次优先级。
• ID 选择器：优先级高于类名选择器和标签选择器。
• 类名选择器：优先级高于标签选择器。
• 标签选择器：最低的优先级。

我们可以自己设置一个例子来证明：

<div id="box" class="wrap">hello world</div>

#box{
  width: 200px;
  height: 200px;
}
.wrap{
  background-color: blue;
}
div{
  background-color: yellow;
}

代码是从上往下执行的，在不考虑优先级的情况下，应该最后是标签选择器生效黄色背景色，但结果为：蓝色背景色，所以类名选择器优先级高于标签选择器，同理对于ID选择器也是如此，但如果我们给优先级最低的标签选择器加上!important时，则会显示黄色背景色。

#box{
  width: 200px;
  height: 200px;
  background-color: red;
}
.wrap{
  background-color: blue;
}
div{
  background-color: yellow !important;
}

所以，优先级：!important > 内联( style="color: red;" ) > id选择器 > 类名选择器 > 标签选择器

废流版真挺．．．