CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。本文将详细介绍各种常见的 CSS 选择器，并提供具体的使用方法和示例。
基本选择器
元素选择器
选择特定类型的HTML元素。
p {
color: blue;
}上述代码会使所有的<p>标签文字变为蓝色。
类选择器
通过类名选择元素。一个元素可以有多个类，不同的类之间以空格分隔。
.highlight {
background-color: yellow;
}对应的HTML：
<p class="highlight">这段文字背景是黄色。</p>ID选择器
通过ID选择唯一的一个元素。每个页面中的ID必须是唯一的。
#header {
font-size: 24px;
}对应的HTML：
<div id="header">这是头部</div>层级选择器
后代选择器
选择某个元素的所有后代元素。
article p {
line-height: 1.5;
}上述代码会使<article>下的所有<p>标签行间距为1.5倍。
子选择器
仅选择某个元素的直接子元素。
ul > li {
margin-bottom: 10px;
}上述代码会使<ul>下的直接<li>标签底部外边距为10像素。
相邻兄弟选择器
选择紧跟在另一个元素后的同级元素。
h2 + p {
font-style: italic;
}上述代码会使紧接在<h2>后面的<p>标签字体变为斜体。
普通兄弟选择器
选择某个元素之后的所有同级元素。
h2 ~ p {
text-decoration: underline;
}上述代码会使<h2>后面的所有<p>标签文本下划线。
属性选择器
包含属性的选择器
选择包含指定属性的元素。
a[href] {
color: green;
}上述代码会选择所有带有href属性的<a>标签并将它们的颜色设为绿色。
属性值完全匹配的选择器
选择具有特定属性值的元素。
input[type="text"] {
width: 200px;
}上述代码会选择所有type属性值为text的<input>标签并设置宽度为200像素。
属性值部分匹配的选择器
属性值开头匹配
选择属性值以特定字符串开头的元素。
[src^="https"] {
border: 1px solid red;
}上述代码会选择所有src属性值以https开头的元素并设置红色边框。
属性值结尾匹配
选择属性值以特定字符串结尾的元素。
[href$=".pdf"] {
color: purple;
}上述代码会选择所有href属性值以.pdf结尾的元素并将它们的颜色设为紫色。
属性值包含匹配
选择属性值中包含特定字符串的元素。
[class*="btn"] {
padding: 10px 20px;
}上述代码会选择所有class属性值中包含btn的元素并设置内边距。
属性值列表匹配
选择属性值是一个由空格分隔的列表且其中至少有一个值与指定值相匹配的元素。
[rel~="external"] {
font-weight: bold;
}上述代码会选择所有rel属性值包含external的元素并将它们的字体加粗。
伪类选择器
第一个子元素
选择作为其父元素的第一个子元素的元素。
li:first-child {
font-weight: bold;
}上述代码会选择每个<ul>或<ol>中的第一个<li>元素并将其字体加粗。
最后一个子元素
选择作为其父元素的最后一个子元素的元素。
tr:last-child td {
border-bottom: none;
}上述代码会选择每个<table>的最后一行<td>元素并移除底边框。
唯一子元素
选择作为其父元素的唯一子元素的元素。
dt:only-child {
font-style: italic;
}上述代码会选择没有兄弟元素的<dt>元素并将其字体变为斜体。
nth子元素
选择作为其父元素的第n个子元素的元素。
p:nth-child(2) {
color: gray;
}上述代码会选择每个父元素的第二个<p>元素并将其颜色设为灰色。
nth-last子元素
选择作为其父元素的倒数第n个子元素的元素。
p:nth-last-child(2) {
color: orange;
}上述代码会选择每个父元素的倒数第二个<p>元素并将其颜色设为橙色。
鼠标悬停状态
选择鼠标悬停在其上的元素。
a:hover {
text-decoration: underline;
}上述代码会选择当鼠标悬停在链接上时为其添加下划线。
被激活的状态
选择被用户激活的元素（例如点击）。
button:active {
background-color: darkblue;
}上述代码会选择当按钮被按下时改变其背景颜色。
已访问过的链接
选择已经被用户访问过的链接。
a:visited {
color: purple;
}上述代码会选择已经被用户访问过的链接并将其颜色设为紫色。
获取焦点的元素
选择当前获得焦点的元素。
input:focus {
outline: 2px dashed black;
}上述代码会选择当前获得焦点的输入框并在周围绘制虚线轮廓。
禁用状态
选择处于禁用状态的表单控件。
input:disabled {
opacity: 0.5;
}上述代码会选择处于禁用状态的输入框并使其透明度降低。
可用状态
选择可用的表单控件。
input:enabled {
background-color: lightgreen;
}上述代码会选择可用的输入框并设置其背景颜色。
检查状态
选择选中的复选框或单选按钮。
input:checked {
box-shadow: 0 0 5px 2px #6699ff;
}上述代码会选择选中的复选框或单选按钮并在其周围绘制阴影。
占位符可见状态
选择显示占位符文本的输入框。
input::placeholder {
color: silver;
}上述代码会选择显示占位符文本的输入框并将占位符颜色设为银色。
必填字段
选择必填字段。
input:required {
border: 2px solid red;
}上述代码会选择必填字段并设置红色边框。
无效字段
选择无效字段。
input:invalid {
background-color: pink;
}上述代码会选择无效字段并设置粉红色背景。
有效字段
选择有效字段。
input:valid {
background-color: lightgreen;
}上述代码会选择有效字段并设置浅绿色背景。
伪元素选择器
第一个字母
选择元素内容的第一个字母。
p::first-letter {
font-size: 2em;
font-weight: bold;
}上述代码会选择段落的第一个字母并将其放大加粗。
第一行
选择元素内容的第一行。
p::first-line {
font-variant: small-caps;
}上述代码会选择段落的第一行并将其转换为小型大写字母。
内容插入
在元素的内容前后插入内容。
q::before {
content: "「";
}
q::after {
content: "」";
}上述代码会在引用符号前插入中文左引号，在引用符号后插入中文右引号。
