CSS选择器的全面应用：从基本选择器到伪元素选择器的全方位实战

CSS 选择器基础概念

CSS（层叠样式表）选择器是 CSS 中至关重要的部分，它用于选取要应用样式的 HTML 元素。通过选择器，我们可以精确地指定哪些元素应该呈现出特定的样式，从简单的文本颜色到复杂的布局设置。选择器的正确使用是构建美观且高效前端页面的基础。

基本选择器

元素选择器

元素选择器是最基础的选择器，它通过 HTML 元素标签名来选取元素。例如，若要将所有 <p> 元素的文本颜色设置为红色，可以这样写：

p {
    color: red;
}

在 HTML 页面中有多个 <p> 段落时，所有这些段落的文本都会变为红色。这是一种非常直接的方式来影响页面中特定类型的所有元素。

类选择器

类选择器允许我们为具有相同类名的多个元素应用相同的样式。在 HTML 中，我们通过 class 属性来为元素指定类名。例如：

<div class="highlight">这是一个高亮的 div</div>
<p class="highlight">这是一个高亮的段落</p>

在 CSS 中，使用 . 加上类名来定义样式：

.highlight {
    background-color: yellow;
}

这里，highlight 类的 div 和 p 元素都会有黄色的背景，类选择器提供了一种灵活的方式，可以将样式应用到不同类型但具有相同逻辑分组的元素上。

ID 选择器

ID 选择器用于选择具有特定 id 属性的单个元素。在 HTML 中，id 属性的值在整个文档中必须是唯一的。例如：

<div id="unique-div">这是一个唯一的 div</div>

在 CSS 中，使用 # 加上 id 名来定义样式：

#unique-div {
    border: 1px solid blue;
}

由于 id 的唯一性，ID 选择器通常用于为特定的、独一无二的元素设置样式，比如页面的导航栏、特定的内容区域等。

组合选择器

后代选择器

后代选择器用于选择某元素的后代元素。语法是将祖先元素和后代元素用空格隔开。例如，若要选择 div 元素内的所有 p 元素：

<div>
    <p>这是 div 内的段落 1</p>
    <span>
        <p>这是 div 内 span 里的段落 2</p>
    </span>
</div>

div p {
    color: green;
}

这里，div 元素内的所有 p 元素，无论嵌套多深，文本颜色都会变为绿色。

子选择器

子选择器与后代选择器类似，但它只选择直接子元素。语法是使用 > 符号连接父元素和子元素。例如，若只想选择 div 的直接子元素 p：

<div>
    <p>这是 div 的直接子段落 1</p>
    <span>
        <p>这不是 div 的直接子段落 2</p>
    </span>
</div>

div > p {
    color: purple;
}

此时，只有 div 的直接子元素 p 的文本颜色会变为紫色，而 span 内的 p 元素不受影响。

相邻兄弟选择器

相邻兄弟选择器用于选择紧接在某元素后的兄弟元素，且该兄弟元素与前一个元素必须具有相同的父元素。语法是使用 + 符号连接两个元素。例如：

<h2>标题</h2>
<p>紧跟标题的段落</p>
<p>另一个段落</p>

h2 + p {
    font-weight: bold;
}

这里，紧跟在 h2 标题后的第一个 p 元素的文本会变为粗体，而第二个 p 元素不受影响。

通用兄弟选择器

通用兄弟选择器用于选择某元素之后的所有兄弟元素，这些兄弟元素具有相同的父元素。语法是使用 ~ 符号连接两个元素。例如：

<div>
    <p>第一个段落</p>
    <span>一个 span</span>
    <p>第二个段落</p>
    <p>第三个段落</p>
</div>

span ~ p {
    text-decoration: underline;
}

在这个例子中，span 之后的所有 p 元素（即第二个和第三个 p 元素）的文本都会有下划线。

属性选择器

属性选择器允许我们根据元素的属性及属性值来选择元素。

简单属性选择器

选择具有指定属性的元素，语法是 [属性名]。例如，选择所有带有 title 属性的元素：

<a href="#" title="链接说明">一个链接</a>
<input type="text" title="输入框说明">

[title] {
    border: 1px dotted gray;
}

这里，带有 title 属性的 a 链接和 input 输入框都会有灰色的点状边框。

属性值精确匹配选择器

选择具有指定属性且属性值完全匹配的元素，语法是 [属性名="属性值"]。例如，选择 type 属性值为 submit 的 input 元素：

<input type="text" value="文本输入">
<input type="submit" value="提交">

input[type="submit"] {
    background-color: lightblue;
}

此时，只有 type 为 submit 的 input 元素会有浅蓝色的背景。

属性值部分匹配选择器

包含单词匹配选择器：选择属性值中包含指定单词的元素，语法是 [属性名~="单词"]。例如，选择 class 属性值中包含 active 单词的元素：

<div class="menu-item active">菜单项 1</div>
<div class="sub - menu active - sub">子菜单项</div>

[class~="active"] {
    color: orange;
}

这里，第一个 div 的文本会变为橙色，因为其 class 属性值包含 active 单词，而第二个 div 由于 active 不是独立单词，不受影响。

开头匹配选择器：选择属性值以指定字符串开头的元素，语法是 [属性名^="字符串"]。例如，选择 href 属性值以 http:// 开头的 a 元素：

<a href="http://example.com">外部链接</a>
<a href="mailto:info@example.com">邮件链接</a>

a[href^="http://"] {
    text - decoration: underline;
}

只有以 http:// 开头的链接会有下划线。

结尾匹配选择器：选择属性值以指定字符串结尾的元素，语法是 [属性名$="字符串"]。例如，选择 src 属性值以 .jpg 结尾的 img 元素：

<img src="image1.jpg" alt="图片 1">
<img src="image2.png" alt="图片 2">

img[src$=".jpg"] {
    border: 2px solid green;
}

只有 src 以 .jpg 结尾的图片会有绿色边框。

任意位置匹配选择器：选择属性值中包含指定字符串的元素，语法是 [属性名*="字符串"]。例如，选择 class 属性值中包含 menu 的元素：

<div class="main - menu">主菜单</div>
<div class="sub - menu - item">子菜单项</div>

[class*="menu"] {
    background - color: lightgray;
}

两个 div 元素都会有浅灰色背景，因为它们的 class 属性值都包含 menu 字符串。

伪类选择器

动态伪类选择器

:link 与 :visited :link 用于选择未访问过的链接，:visited 用于选择已访问过的链接。例如：

<a href="#">一个链接</a>

a:link {
    color: blue;
}
a:visited {
    color: purple;
}

未访问的链接是蓝色，访问过的链接变为紫色，这有助于用户区分已访问和未访问的链接。

:hover :hover 用于选择鼠标悬停在其上的元素。例如，当鼠标悬停在按钮上时改变按钮的背景颜色：

<button>悬停我</button>

button:hover {
    background - color: yellow;
}

这种效果可以增加用户与页面的交互性。

:active :active 用于选择被激活（如按下鼠标左键但未释放）的元素。例如，在按钮按下时改变其样式：

<button>点击我</button>

button:active {
    background - color: green;
    transform: scale(0.95);
}

这里，按钮按下时背景变为绿色且稍微缩小，给用户即时的反馈。

目标伪类选择器 :target

:target 选择当前活动的目标元素，当页面中有锚点链接时，点击链接跳转到相应的目标元素，该目标元素就处于 :target 状态。例如：

<a href="#section1">跳转到 section1</a>
<div id="section1">
    <h2>这是 section1</h2>
    <p>这里是 section1 的内容</p>
</div>

#section1:target {
    background - color: lightblue;
}

当点击链接跳转到 section1 时，section1 的 div 会有浅蓝色背景。

语言伪类选择器 :lang()

:lang() 根据元素的语言设置选择元素。例如，在 HTML 中设置语言属性：

<html lang="en">
    <body>
        <p lang="fr">Bonjour</p>
        <p lang="en">Hello</p>
    </body>
</html>

p:lang(fr) {
    font - style: italic;
}

这里，法语的段落文本会变为斜体。

结构伪类选择器

:first - child 与 :last - child :first - child 选择父元素的第一个子元素，:last - child 选择父元素的最后一个子元素。例如：

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

li:first - child {
    color: red;
}
li:last - child {
    color: green;
}

第一项文本变为红色，最后一项文本变为绿色。

:nth - child(n) 与 :nth - last - child(n) :nth - child(n) 选择父元素的第 n 个子元素，n 可以是数字、关键字或表达式。:nth - last - child(n) 从后往前数选择第 n 个子元素。例如，选择列表中的偶数项：

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>

li:nth - child(2n) {
    background - color: lightgray;
}

第二项和第四项会有浅灰色背景。

:first - of - type 与 :last - of - type :first - of - type 选择同类型元素中的第一个，:last - of - type 选择同类型元素中的最后一个。例如：

<div>
    <p>第一个段落</p>
    <span>一个 span</span>
    <p>第二个段落</p>
</div>

p:first - of - type {
    font - weight: bold;
}
p:last - of - type {
    text - decoration: underline;
}

第一个 p 元素文本加粗，最后一个 p 元素文本有下划线。

:nth - of - type(n) 与 :nth - last - of - type(n) :nth - of - type(n) 选择同类型元素中的第 n 个，:nth - last - of - type(n) 从后往前选择同类型元素中的第 n 个。例如，选择 div 中的第二个 p 元素：

<div>
    <p>第一个段落</p>
    <span>一个 span</span>
    <p>第二个段落</p>
    <p>第三个段落</p>
</div>

div p:nth - of - type(2) {
    color: orange;
}

第二个 p 元素文本变为橙色。

:only - child 与 :only - of - type :only - child 选择父元素中唯一的子元素，:only - of - type 选择父元素中唯一的该类型子元素。例如：

<div>
    <p>唯一的段落</p>
</div>
<div>
    <p>第一个段落</p>
    <p>第二个段落</p>
</div>

p:only - child {
    background - color: yellow;
}

第一个 div 中的段落会有黄色背景，因为它是唯一的子元素。

否定伪类选择器 :not()

:not() 选择不符合指定选择器的元素。例如，选择所有不是 active 类的 li 元素：

<ul>
    <li class="active">活动项</li>
    <li>普通项 1</li>
    <li>普通项 2</li>
</ul>

li:not(.active) {
    color: gray;
}

普通项 1 和普通项 2 的文本颜色变为灰色。

伪元素选择器

::before 与 ::after

::before 和 ::after 伪元素允许我们在元素内容的前面或后面插入生成的内容。例如，在每个 h2 标题前添加一个图标：

<h2>标题</h2>

h2::before {
    content: "📌 ";
    color: blue;
}

这里，在每个 h2 标题前会显示一个蓝色的图钉图标和一个空格。::after 同理，只是插入位置在元素内容之后。

::first - letter 与 ::first - line

::first - letter 选择元素文本的第一个字母，::first - line 选择元素文本的第一行。例如，将段落的第一个字母放大并变色：

<p>这是一个段落。这是段落的内容。</p>

p::first - letter {
    font - size: 2em;
    color: red;
}

段落的第一个字母会变大且变为红色。对于 ::first - line，如果要为段落第一行设置不同的背景颜色：

p::first - line {
    background - color: lightyellow;
}

段落的第一行就会有浅黄色背景。

::selection

::selection 用于设置用户选中元素文本时的样式。例如，当用户选中段落文本时，改变选中部分的背景和文本颜色：

<p>选中我试试</p>

p::selection {
    background - color: blue;
    color: white;
}

当用户选中段落文本时，选中部分会有蓝色背景和白色文本。

通过对这些 CSS 选择器从基本到伪元素的全面了解和实战应用，我们能够更加精确和灵活地控制网页元素的样式，构建出丰富多样且交互性强的前端页面。在实际项目中，合理组合使用各种选择器，能够提高代码的可维护性和复用性，是前端开发中不可或缺的技能。