面试官: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选择器 > 类名选择器 > 标签选择器

废流版真挺...

相关推荐
LuckySusu1 分钟前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
沐怡旸1 分钟前
【底层机制】【Android】深入理解UI体系与绘制机制
android·面试
LuckySusu1 分钟前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
洋不写bug14 分钟前
前端环境搭建,保姆式教学
前端
需要兼职养活自己26 分钟前
react高阶组件
前端·react.js
TechFrank33 分钟前
Shadcn/ui 重磅更新:7 个实用新组件深度解析与实战指南
前端
快乐是一切40 分钟前
PDF中的图像与外部对象
前端
前端开发呀1 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云枫晖1 小时前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate1 小时前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员