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

省流版:

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

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

废流版:

1. ID选择器

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

html 复制代码
<div id="box">
  Hello, this is a box.
</div>
css 复制代码
#box {
  color: red;
}

2. 类名选择器

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

html 复制代码
<div class="wrap">
  Hello, this is a wrap.
</div>
css 复制代码
.wrap {
  font-weight: bold;
}

3. 标签选择器

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

html 复制代码
<p>
  This is a paragraph.
</p>
css 复制代码
p {
  font-style: italic;
}

4. 后代选择器

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

html 复制代码
<div id="app">
    <div>
        1号.
        <div>
            1.1号
        </div>
    </div>
    <div>2号</div>
    <div>3号</div>
  </div>
css 复制代码
#app div{
    color: red;
    }

效果:

5. 子级选择器

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

html 复制代码
<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>
css 复制代码
#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)不受这个选择器的影响,它们的样式保持原样。

html 复制代码
.box1,
.box2,
.box3 {
    width: 30px;
    height: 30px;
    border: 1px solid black;
}

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

/* 若是以下这种写法则不生效 */
.box1+.box3 {
    background-color: red;
}
css 复制代码
.box1 + .box2 {
  border: 2px solid #ea490e;
}

效果:

7. 群组选择器

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

html 复制代码
<div id="app">
    <div class="box1">1号</div>
    <div class="box2">2号</div>
    <div class="box3">3号</div>
</div>
css 复制代码
.box1,
.box2,
.box3 {
    width: 30px;
    height: 30px;
    border: 1px solid black;
}

效果:

8. 属性选择器

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

html 复制代码
<input type="text">
<input type="text" abc="abc">
css 复制代码
input[abc='abc'] {
  background-color: yellow;
}

效果:

9. 伪元素选择器

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

html 复制代码
<div id="input">这是一个div</div>
css 复制代码
#input::before {
    content: '这是div前面';
    display: block;
}
#input::after {
    content: '这是div后面';
    display: block;
}

效果:

10. 伪类选择器

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

html 复制代码
<div id="input">这是一个div</div>
css 复制代码
#input {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
#input:hover {
    background-color: yellow;
}

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

优先级

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

  • !important:具有最高优先级,即使后面有其他规则也会被覆盖。
  • 内联样式(如style="color: red;"):其次优先级。
  • ID 选择器:优先级高于类名选择器和标签选择器。
  • 类名选择器:优先级高于标签选择器。
  • 标签选择器:最低的优先级。
我们可以自己设置一个例子来证明:
html 复制代码
<div id="box" class="wrap">hello world</div>
css 复制代码
#box{
  width: 200px;
  height: 200px;
}
.wrap{
  background-color: blue;
}
div{
  background-color: yellow;
}

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

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

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

废流版真挺...

相关推荐
黄昏恋慕黎明18 小时前
JVM虚拟机(面试重)
jvm·面试·职场和发展
-睡到自然醒~18 小时前
[go 面试] 并发与数据一致性:事务的保障
数据库·面试·golang
拉不动的猪18 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
浩男孩18 小时前
🍀继分页器组件后,封装了个抽屉组件
前端
Dolphin_海豚18 小时前
@vue/reactivity
前端·vue.js·面试
该用户已不存在18 小时前
程序员的噩梦,祖传代码该怎么下手?
前端·后端
怪兽201419 小时前
请谈谈什么是同步屏障?
android·面试
namehu19 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
摸鱼的春哥19 小时前
【编程】是什么编程思想,让老板对小伙怒飙英文?Are you OK?
前端·javascript·后端
尘世中一位迷途小书童19 小时前
版本管理实战:Changeset 工作流完全指南(含中英文对照)
前端·面试·架构