掌握CSS选择器的基本用法

CSS 选择器基础概述

CSS（层叠样式表）是用于描述 HTML 或 XML 文档样式的语言，而选择器则是 CSS 中极为关键的部分，它决定了哪些 HTML 元素会应用特定的样式规则。简单来说，选择器就像是一把钥匙，通过它可以精准地定位到我们想要设置样式的 HTML 元素。

在 CSS 中，选择器主要分为多种类型，包括基础选择器、组合选择器、伪类选择器、伪元素选择器等。不同类型的选择器有着不同的功能和使用场景，掌握它们的基本用法是进行前端页面样式设计的基础。

基础选择器

元素选择器

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

p {
    color: red;
}

在这个例子中，p 就是元素选择器，它选中了文档中所有的 <p> 标签元素，并将它们的字体颜色设置为红色。这种选择器简单直接，适合对某一类元素进行统一的样式设置。

类选择器

类选择器使用 . 符号加上自定义的类名来选择元素。在 HTML 中，我们可以为多个元素添加相同的类名，然后通过类选择器对这些元素应用相同的样式。比如，假设有多个不同的 HTML 元素（如 <div>、<span> 等），我们想让它们都拥有一种特殊的样式，如背景色为黄色，可以如下操作： 首先在 HTML 中给元素添加类名：

<div class="special-style">这是一个 div</div>
<span class="special-style">这是一个 span</span>

然后在 CSS 中使用类选择器设置样式：

.special-style {
    background - color: yellow;
}

类选择器的优势在于它的灵活性，可以针对不同标签的元素应用相同的样式，方便实现复用的样式模块。

ID 选择器

ID 选择器使用 # 符号加上唯一的 ID 名来选择元素。在 HTML 文档中，每个 ID 名应该是唯一的，即一个 ID 只对应一个元素。例如，要为一个具有特定 ID 的 <div> 元素设置边框样式： HTML 代码：

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

CSS 代码：

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

ID 选择器的权重较高，通常用于为特定的、独一无二的元素设置样式。但需要注意的是，由于其唯一性，在大型项目中应避免过度使用 ID 选择器，以免造成样式管理的混乱。

通配选择器

通配选择器使用 * 来表示，它会选中文档中的所有元素。例如，要将文档中所有元素的 margin 和 padding 都设置为 0，可以这样写：

* {
    margin: 0;
    padding: 0;
}

通配选择器在一些需要对整个文档进行初始化样式设置时非常有用，但由于它会影响到所有元素，使用时要谨慎，以免造成不必要的性能损耗。

组合选择器

后代选择器

后代选择器通过空格来连接两个或多个选择器，它会选择作为第一个选择器后代的所有符合第二个选择器的元素。例如，要选择 <div> 元素内部所有的 <p> 元素： HTML 代码：

<div>
    <p>这是 div 内的第一个 p</p>
    <span>
        <p>这是 div 内 span 中的 p</p>
    </span>
</div>

CSS 代码：

div p {
    color: blue;
}

在这个例子中，所有在 <div> 元素内部的 <p> 元素，无论其嵌套有多深，都会被选中并设置字体颜色为蓝色。

子选择器

子选择器使用 > 符号来连接两个选择器，它只会选择作为第一个选择器直接子元素的符合第二个选择器的元素。与后代选择器不同，子选择器不会选中更深层次嵌套的元素。例如，只选择 <ul> 元素的直接子 <li> 元素： HTML 代码：

<ul>
    <li>直接子 li</li>
    <li>
        <ul>
            <li>非直接子 li</li>
        </ul>
    </li>
</ul>

CSS 代码：

ul > li {
    background - color: lightgray;
}

这样，只有 <ul> 的直接子 <li> 元素会有浅灰色的背景，而嵌套在 <li> 内部 <ul> 中的 <li> 元素不会应用该样式。

相邻兄弟选择器

相邻兄弟选择器使用 + 符号来连接两个选择器，它会选择紧跟在第一个选择器后面且具有相同父元素的符合第二个选择器的元素。例如，要选择紧跟在 <h1> 元素后面的第一个 <p> 元素： HTML 代码：

<h1>标题</h1>
<p>紧跟 h1 的第一个 p</p>
<p>第二个 p</p>

CSS 代码：

h1 + p {
    font - weight: bold;
}

只有紧跟在 <h1> 后面的第一个 <p> 元素的字体加粗，第二个 <p> 元素不受影响。

通用兄弟选择器

通用兄弟选择器使用 ~ 符号来连接两个选择器，它会选择在第一个选择器之后且具有相同父元素的所有符合第二个选择器的元素。例如，选择在 <h2> 元素之后的所有 <p> 元素： HTML 代码：

<h2>标题 2</h2>
<p>第一个 p</p>
<span></span>
<p>第二个 p</p>

CSS 代码：

h2 ~ p {
    text - decoration: underline;
}

在 <h2> 之后的所有 <p> 元素都会有下划线，而不管它们之间是否有其他元素间隔。

伪类选择器

动态伪类选择器

1. :link 伪类 :link 伪类用于选择未被访问过的链接。例如，为了设置未访问链接的样式为蓝色且无下划线：

a:link {
    color: blue;
    text - decoration: none;
}

2. :visited 伪类 :visited 伪类用于选择已经被访问过的链接。通常，我们会为已访问链接设置与未访问链接不同的样式，以提供用户反馈。比如，将已访问链接设置为紫色：

a:visited {
    color: purple;
}

3. :hover 伪类 :hover 伪类用于选择鼠标指针悬停在其上的元素。这在为按钮、链接等元素添加交互效果时非常常用。例如，当鼠标悬停在按钮上时，改变按钮的背景色： HTML 代码：

<button>悬停我</button>

CSS 代码：

button:hover {
    background - color: green;
}

4. :active 伪类 :active 伪类用于选择被激活（如被点击）的元素。以链接为例，当链接被点击时，可以改变其颜色：

a:active {
    color: red;
}

5. :focus 伪类 :focus 伪类用于选择当前获得焦点的元素，通常用于表单元素。例如，当输入框获得焦点时，改变其边框颜色： HTML 代码：

<input type="text" placeholder="输入内容">

CSS 代码：

input:focus {
    border: 2px solid blue;
}

结构性伪类选择器

1. :first - child 伪类 :first - child 伪类用于选择作为其父元素的第一个子元素的元素。例如，选择列表中的第一个 <li> 元素并设置其样式： HTML 代码：

<ul>
    <li>第一个 li</li>
    <li>第二个 li</li>
</ul>

CSS 代码：

li:first - child {
    color: green;
}

2. :last - child 伪类 :last - child 伪类与 :first - child 相反，它选择作为其父元素的最后一个子元素的元素。例如，选择表格中的最后一行： HTML 代码：

<table>
    <tr><td>第一行</td></tr>
    <tr><td>第二行</td></tr>
    <tr><td>最后一行</td></tr>
</table>

CSS 代码：

tr:last - child {
    background - color: lightblue;
}

3. :nth - child(n) 伪类 :nth - child(n) 伪类用于选择其父元素的第 n 个子元素。这里的 n 可以是数字、关键字或表达式。例如，选择列表中的偶数项 <li> 元素：

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

4. :nth - last - child(n) 伪类 :nth - last - child(n) 伪类从元素的最后一个子元素开始计数，选择第 n 个元素。例如，选择表格中倒数第二行：

tr:nth - last - child(2) {
    border - bottom: 2px solid black;
}

5. :first - of - type 伪类 :first - of - type 伪类选择同类型元素中的第一个元素。与 :first - child 的区别在于，它只关注元素类型。例如，在一个包含多个 <div> 和 <p> 的容器中，选择第一个 <p> 元素： HTML 代码：

<div>这是一个 div</div>
<p>第一个 p</p>
<p>第二个 p</p>

CSS 代码：

p:first - of - type {
    font - size: 18px;
}

6. :last - of - type 伪类 :last - of - type 伪类选择同类型元素中的最后一个元素。例如，选择文档中最后一个 <img> 元素：

img:last - of - type {
    margin - bottom: 20px;
}

7. :nth - of - type(n) 伪类 :nth - of - type(n) 伪类选择同类型元素中的第 n 个元素。例如，选择每第三个 <section> 元素并设置其背景色：

section:nth - of - type(3n) {
    background - color: lightyellow;
}

8. :nth - last - of - type(n) 伪类 :nth - last - of - type(n) 伪类从同类型元素的最后一个开始计数，选择第 n 个元素。

9. :only - child 伪类 :only - child 伪类选择其父元素中唯一的子元素。例如，若一个 <div> 中只有一个 <p> 元素，就可以选中它： HTML 代码：

<div>
    <p>唯一的子元素</p>
</div>

CSS 代码：

p:only - child {
    font - style: italic;
}

10. :only - of - type 伪类 :only - of - type 伪类选择其父元素中唯一的该类型子元素。比如，若一个 <div> 中只有一个 <img> 元素，就选中它： HTML 代码：

<div>
    <img src="example.jpg" alt="示例图片">
</div>

CSS 代码：

img:only - of - type {
    border: 5px solid orange;
}

目标伪类选择器

:target 伪类选择当前活动的目标元素。当页面中有锚点链接，点击链接跳转到相应的目标元素时，该目标元素就处于活动状态。例如，页面中有一个带有 ID 的 <div> 元素，通过锚点链接跳转到该 <div> 时，改变其背景色： HTML 代码：

<a href="#target - div">跳转到目标 div</a>
<div id="target - div">这是目标 div</div>

CSS 代码：

#target - div:target {
    background - color: pink;
}

否定伪类选择器

:not(selector) 伪类选择不符合指定选择器的元素。例如，选择所有不是 <p> 元素的元素：

:not(p) {
    border - radius: 5px;
}

这会为除 <p> 元素之外的所有元素添加圆角边框。

伪元素选择器

::before 和 ::after 伪元素

::before 和 ::after 伪元素用于在选定元素的内容之前或之后插入生成的内容。它们需要配合 content 属性使用。例如，在每个 <h1> 元素之前添加一个图标：

h1::before {
    content: url(icon.png);
    margin - right: 5px;
}

在这个例子中，::before 伪元素在 <h1> 元素内容之前插入了一个图标，并设置了图标与文本之间的间距。

::after 伪元素同理，比如在每个段落之后添加一个自定义的符号：

p::after {
    content: "☞";
    color: red;
}

::first - letter 伪元素

::first - letter 伪元素用于选择文本块中第一行的第一个字母。例如，实现首字母大写并设置特殊样式：

p::first - letter {
    font - size: 2em;
    color: blue;
    float: left;
    margin - right: 5px;
}

这样，每个 <p> 元素的首字母会变大、变蓝，并向左浮动。

::first - line 伪元素

::first - line 伪元素用于选择文本块中第一行的内容。例如，为段落的第一行设置不同的字体样式：

p::first - line {
    font - style: italic;
}

CSS 选择器的优先级

CSS 选择器的优先级决定了当多个样式规则应用到同一个元素时，哪个规则会生效。优先级由选择器的特殊性（Specificity）值来衡量。

1. 计算特殊性值

   • 内联样式：特殊性值为 1,0,0,0。例如，<p style="color: red;"> 这种直接写在元素标签内的样式。
   • ID 选择器：每个 ID 选择器计为 0,1,0,0。如 #my - id { color: blue; }。
   • 类选择器、属性选择器和伪类选择器：每个计为 0,0,1,0。比如 .my - class { color: green; } 或 a:hover { color: purple; }。
   • 元素选择器和伪元素选择器：每个计为 0,0,0,1。例如 p { color: black; } 或 p::before { content: ' '; }。
   • 通配选择器：特殊性值为 0,0,0,0。即 * { margin: 0; }。

2. 优先级比较

   • 特殊性值从左到右依次比较，数值高的优先级高。例如，0,1,0,0（ID 选择器）的优先级高于 0,0,1,0（类选择器）。
   • 如果特殊性值相同，后定义的样式规则会覆盖先定义的规则。例如：

p {
    color: red;
}
p {
    color: blue;
}

在这种情况下，文本颜色会是蓝色，因为后定义的样式生效。

3. !important 声明 !important 声明可以强制一个样式规则具有最高优先级，无论其特殊性值如何。例如：

p {
    color: red!important;
}

这样，即使有其他优先级更高的选择器，<p> 元素的颜色也会是红色。但应尽量避免过度使用 !important，因为它会使样式的优先级难以管理和维护。

CSS 选择器在实际项目中的应用技巧

1. 模块化和复用 利用类选择器实现样式的模块化和复用。例如，创建一些通用的按钮样式类，如 .btn - primary、.btn - secondary 等，然后在不同的按钮元素上应用这些类，避免重复编写样式代码。
2. 避免过度嵌套 虽然后代选择器等嵌套选择器很强大，但过度嵌套会使选择器变得复杂，降低样式的可维护性。尽量保持选择器的简洁，能用简单选择器实现的，就不要使用复杂的嵌套。
3. 响应式设计中的选择器 在响应式设计中，结合媒体查询和各种选择器来实现不同屏幕尺寸下的样式调整。例如，通过媒体查询和类选择器，在小屏幕上隐藏某些元素，或改变布局样式：

@media (max - width: 600px) {
   .hide - on - small {
        display: none;
    }
}

4. 结合 JavaScript 动态操作样式 可以通过 JavaScript 动态添加或移除元素的类名，从而利用 CSS 选择器来控制样式的变化。例如，点击按钮切换菜单的显示与隐藏，可以通过 JavaScript 给菜单元素添加或移除特定的类，再通过 CSS 类选择器控制菜单的样式。

总之，掌握 CSS 选择器的基本用法并灵活应用，对于构建美观、高效且易于维护的前端页面至关重要。不同类型的选择器各有其特点和适用场景，在实际开发中需要根据具体需求合理选择和组合使用。