Web前端入门第 22 问：CSS 选择器一览
HTML 在语法上并无大小限制，所以其结构可以浩瀚无边，CSS 选择器的作用则是在这些复杂的 HTML 结构中进行元素定位。
示例代码
记住此代码，后面所有的 css 选择器都是基于此代码。
注意：代码中存在两个一样的 id="p1" 元素，仅为了演示效果，正常编码中请保证 id 唯一性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<body>
<div class="div1">
<p class="p1">p 标签文本1-1</p>
<p class="p2">p 标签文本1-2</p>
<input type="text" placeholder="输入内容">
</div>
<div class="div2">
<p id="p1" class="p1">p 标签文本2-1</p>
<p id="p2" class="p2">p 标签文本2-2</p>
</div>
<div class="div3">
<p id="p1" class="p1">p 标签文本3-1</p>
<p class="p2">p 标签文本3-2</p>
</div>
<div class="div4">
<div class="div41">div 标签文本4-1</div>
<div class="div42">div 标签文本4-2</div>
</div>
<div class="div5">
<div class="div51 div511 div51-1">div 标签文本5-1</div>
<div class="div52 div522 div52-2">div 标签文本5-2</div>
</div>
<div class="div6">
<div lang="zh-CN" class="div61 div61-1">div 标签文本6-1</div>
<div lang="zh-TW" class="div62 div62-2">div 标签文本6-2</div>
</div>
</body>
</html>
选择器分类
记住文本颜色的两个值：红色 red 和蓝色 blue，以下都使用此演示。
通配符选择器
选择所有元素，选择器使用星号 *，如 div * 表示选择 div 标签下的所有后代元素。
标签选择器
直接选择 HTML 元素，选择器以标签名开头，如 p、div 等。
p {
color: red;
}
div {
color: blue;
}
运行效果：
可以看到 p 元素被红色覆盖，div 元素被蓝色覆盖，标签选择器精准命中对应标签，不会存在 p 选择器牵走了 div 元素。
类选择器
选择具有特定类的元素，选择器以点 . 开头，如 .classname 选择 class="classname" 的元素。
.p1 {
color: red;
}
运行效果：
.p1 选择了 class="p1" 的元素，所以 p1 被红色覆盖，p2 未被覆盖。
ID选择器
选择具有特定ID的元素，选择器以井号 # 开头，如 #id 选择 id="id" 的元素。
#p1 {
color: red;
}
#p2 {
color: blue;
}
运行效果：
虽然语法规定 id 是唯一的，但如果有两个一样的 id 元素，css 选择器还是会命中。
属性选择器
根据元素的属性及属性值来选择元素，选择器以中括号开头，如 [attr=value]。
-
[attr]表示带有以 attr 命名的属性的元素。[id] { color: red; }运行效果：
![]()
[id]命中了所有带有 id 属性的元素。 -
[attr=value]表示带有以 attr 命名的属性，且属性值为 value 的元素。[class="div41"], [class="div42"] { color: red; } [class="div511"] { color: blue; }运行效果：
![]()
[class="div511"]未命中class="div51 div511 div51-1"，原因是此属性还有其他值，值不唯一。 -
[attr~=value]表示带有以 attr 命名的属性的元素，并且该属性为“value”或者是一个以空格作为分隔的值列表，其中至少有一个值为 value。[class~="div41"] { color: red; } [class~="div511"] { color: blue; }运行效果：
![]()
-
[attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（- 为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN、zh-TW 可以用 zh 作为 value）。[class|="div41"] { color: red; } div[lang|="zh"] { color: blue; }运行效果：
![]()
-
[attr^=value]表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。[class^="p"] { color: red; } [class^="div51"] { color: blue; }运行效果：
![]()
-
[attr$=value]表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。[class$="-1"] { color: red; } [class$="-2"] { color: blue; }运行效果：
![]()
-
[attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。[class*="11"] { color: red; } [class*="div61"] { color: blue; }运行效果：
![]()
-
[attr operator value i]在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。写法:
[class="c" i]表示忽略大小写匹配class="c"和class="C"。 -
[attr operator value s]在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。写法:
[class="b" s]表示区分大小写匹配class="b"，但不匹配class="B"。实验属性，存在兼容性，截止发文仅 Firefox 支持
属性选择器常见应用场景：
- 文件类型图标设置，通过匹配文件链接后缀设置相应图标，写法：
a[href$=".png"]、a[href$=".docx"]、a[href$=".pptx"]、a[href$=".pdf"]。 - 不同超链接不同颜色，如：以 "https" 开始，".org" 结尾的链接设置一个颜色，写法：
a[href^="https"][href$=".org"]。
伪类选择器
选择元素的特定状态，如 :hover、:first-child 等。
语法：
/* 表示鼠标移上去时变为红色 */
a:hover {
color: red;
}
/* 表示 .div3 元素下的第二个 p 元素变为红色 */
.div3 p:nth-of-type(2) {
color: red;
}
截止发文，MDN 收录有大约 68 个标准伪类选择器，部分伪类选择器存在兼容性，使用时需注意。
其中常用的有：
:active: 元素被激活时（如鼠标点击按下时）应用的样式。:checked: 适用于被选中的表单元素（如单选按钮或复选框）。:disabled: 选择被禁用（disabled属性）的表单元素，表示不可交互状态。:empty: 选择内部无任何子元素或文本内容的元素（包括空格）。:enabled: 选择未被禁用的表单元素（与:disabled相反）。:first-child: 选择父元素下的第一个子元素（需满足选择器类型）。:first-of-type: 选择父元素下同类型元素的第一个（如第一个<p>）。:focus: 元素获得焦点时（如输入框被点击或键盘选中）应用的样式。:hover: 鼠标悬停在元素上时生效的样式。:last-child: 选择父元素下的最后一个子元素。:last-of-type: 选择父元素下同类型元素的最后一个。:link: 选择未被访问过的链接（<a href>的默认状态）。:not(selector): 排除与括号内选择器匹配的元素（如:not(.class)）。:nth-child(n): 根据位置选择子元素（如2n选择偶数项，2n+1选择奇数项，3选第三个）。:nth-last-child(n): 类似:nth-child，但从最后一个子元素倒序计数。:nth-last-of-type(n): 从后往前，选择同类型元素的第n个。:nth-of-type(n): 选择同类型元素的第n个（如第二个<div>）。:only-child: 选择父元素中唯一的子元素（没有兄弟元素）。:only-of-type: 选择父元素中唯一类型的元素（可能有其他类型的兄弟元素）。:placeholder-shown: 当输入框的 placeholder 文本显示时（如输入内容为空）生效。:root: 选择文档的根元素（<html>），常用于定义CSS变量。:visited: 选择已访问过的链接，受浏览器安全限制（仅支持颜色等少数属性）。
此处就不一一演示，可自行练习写一写每个伪类选择器的应用。
常见混淆点
:only-child vs :only-of-type
:only-child要求是父元素的唯一子元素；
:only-of-type允许存在其他类型元素，但当前类型仅有一个。
:nth-of-type vs :nth-child
:nth-of-type按元素类型过滤后计数，而:nth-child直接计数所有子元素。
:placeholder-shown vs ::placeholder
:placeholder-shown针对输入框显示占位文本的状态，而::placeholder是直接样式化占位文本本身。
伪元素选择器
选择元素的特定部分，如 ::before、::after。
截止发文，MDN 收录有大约 22 个标准伪元素选择器，部分伪元素选择器存在兼容性，使用时需注意。
其中常用的有：
::after在元素内容的后面插入生成的内容。::before在元素内容的前面插入生成的内容。::first-letter设置块级元素首字母的样式。::first-line设置元素首行的样式。::placeholder设置表单元素占位符文本的样式。::selection设置用户选中文本的样式。
语法：
.div1 .p1::after {
content: '我是后面插入内容';
color: red;
}
.div1 .p1::before {
content: '我是前面插入内容';
color: blue;
}
.div1 .p2::first-letter {
font-size: 30px;
}
.div3::first-line {
font-weight: bold;
}
input::placeholder {
color: red;
}
::selection {
background-color: yellow;
}
运行效果：
关系选择器
关系选择器常用于打组合拳，一般不单独使用。
后代选择器
后代选择器（英文空格）匹配属于指定元素后代的所有元素。
/* 选择属于 .div1 类的所有后代元素 p */
.div1 p {
color: red;
}
子选择器
子选择器匹配（>）属于指定元素直接子元素的所有元素。
/* 选择属于 .div2 类的直接子元素 p */
.div2 > p {
color: blue;
}
相邻兄弟选择器
相邻兄弟选择器（+）匹配所有作为指定元素的相邻同级的元素，相邻的意思是紧随其后。
/* 选择属于 .div3 类后面紧跟着的元素 div */
.div3 + div {
color: green;
}
选择器列表
选择器列表（,）选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。
/* 同时选择 .div5 .p1 和 .div5 .p2 */
.div5 .p1,
.div5 .p2 {
color: #990099;
}
通用兄弟选择器
通用兄弟选择器（~）匹配属于指定元素屁股后的所有同级元素。
/* 选择属于 .div3 类后面所有的 div 元素 */
.div3 ~ div {
border: 1px solid blue;
}
演示代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
.div1 p {
color: red;
}
.div2 > p {
color: blue;
}
.div3 + div {
color: green;
}
.div5 .p1,
.div5 .p2 {
color: #990099;
}
.div3 ~ div {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="div1">
<p>p1</p>
<p>p2</p>
</div>
<div class="div2">
<p>p1</p>
<p>p2</p>
<section>
<p>p3</p>
</section>
</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">
<p class="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
</html>
运行效果：
总结
这些选择器可以单独使用，也可以组合使用，以实现更精确的选择和样式应用。理解和灵活使用这些选择器是掌握 CSS 的关键。
浙公网安备 33010602011771号