CSS 选择器基础入门：从零基础到精通

一、CSS 选择器概述

1.1 什么是 CSS 选择器

CSS 选择器是 CSS（层叠样式表）中用于指定页面上要应用样式规则的 HTML 元素的一种方法。简单来说，CSS 选择器就像是 "网页元素的遥控器"，用于定位 HTML 中的特定元素并应用样式。

通过 CSS 选择器，我们可以精确地控制每个元素的表现形式，包括字体颜色、背景色、边框样式、布局位置等。选择器是 CSS 的核心组成部分，它让开发者能够精确地选择和操作 HTML 元素，从而实现高度定制化的设计。

1.2 CSS 选择器的重要性

选择器在网页开发中具有至关重要的作用：

提高样式控制能力：通过选择器，CSS 可以精确地指定需要应用样式的元素，从而提高网页的样式控制能力。
复用样式：类选择器和 ID 选择器允许通过一个样式规则影响多个元素，从而减少代码冗余。
增强可维护性：使用选择器分离结构和样式，使得网页的结构和样式更加独立，便于维护和修改。
响应式设计：选择器可以配合媒体查询，使得网页能够根据不同的屏幕尺寸和设备类型自动调整样式。

1.3 CSS 选择器的分类

根据不同的分类标准，CSS 选择器可以分为多种类型。通常，我们可以将 CSS 选择器分为以下几类：

基础选择器：包括元素选择器、类选择器、ID 选择器和通配符选择器。
复合选择器：包括后代选择器、子选择器、并集选择器和交集选择器。
伪类选择器：用于选择处于特定状态或位置的元素。
伪元素选择器：用于选择元素的特定部分。
属性选择器：根据元素的属性或属性值来选择元素。

在本文中，我们将重点介绍基础选择器、复合选择器和伪类选择器，这些是 CSS 选择器中最基础、最常用的类型。

二、基础选择器详解

基础选择器是 CSS 选择器中最基本的类型，由单个选择器构成，包括元素选择器、类选择器、ID 选择器和通配符选择器。

2.1 元素选择器（标签选择器）

元素选择器是最基本的 CSS 选择器，它通过 HTML 标签名称来选中页面中的元素。例如，p 选择器将选中所有<p>标签的元素。

语法：

css

标签名 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

p {
  color: blue;
}

在这个例子中，所有的段落标签（<p>）的文本颜色都会被设置为蓝色。

特点：

能快速为同一类型的标签都选择出来。
选择页面中所有该类型的元素，应用范围广泛。
不能差异化选择，所有该类型的元素都会被选中。
优先级较低，容易被其他选择器覆盖。

应用场景：

全局样式设置，如设置所有段落的字体大小和颜色。
重置浏览器默认样式，如使用通配符选择器\*重置内外边距。

2.2 类选择器

类选择器用于选中具有特定 class 属性值的 HTML 元素。类选择器的标识符以点（.）开头，后跟类名。

语法：

css

.类名 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

.highlight {
  color: red;
}

应用方式：

在 HTML 标签中使用 class 属性指定类名：

html

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

特点：

差异化表示不同的标签。
一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要使用空格分割）。
类名用.开头，下方的标签使用 class 属性来调用。
可以让代码更好复用，是实际开发中最常用的选择器类型之一。

命名规范：

类名要有意义，不要随便起名。
不要使用纯数字和中文进行命名，尽量使用英文。
不能以标签名作为类名。
如果是长的类名，可以使用-分割。

应用场景：

为不同的 HTML 元素应用相同的样式。
创建可复用的样式组件，如按钮样式、导航栏样式等。
配合 JavaScript 动态添加或移除类名，实现动态效果。

2.3 ID 选择器

ID 选择器通过 HTML 元素的 id 属性来选中元素。id 在一个 HTML 文档中是唯一的，因此 ID 选择器通常用来选中页面上的某个特定元素。

语法：

css

#id名 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

#header {
  font-size: 24px;
  font-weight: bold;
}

应用方式：

在 HTML 标签中使用 id 属性指定 ID 名：

html

<div id="header">这是页面头部</div>

特点：

ID 选择器在 CSS 中使用#开头表示。
ID 是唯一的，不能被多个标签使用（是和类选择器最大的区别）。
优先级高于类选择器和元素选择器。
主要用于选择唯一的 HTML 元素。

类比：

姓名是类选择器，可以重复。
身份证号码是 ID 选择器，是唯一的。

应用场景：

选择页面中的唯一元素，如页面头部、导航栏、页脚等。
配合 JavaScript 获取特定元素，进行动态操作。
定义特定区域的样式，如模态对话框、特定的表单区域等。

2.4 通配符选择器

通配符选择器使用\*定义，选取页面上的所有 HTML 元素。

语法：

css

* {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

* {
  margin: 0;
  padding: 0;
}

特点：

选择所有 HTML 元素。
不需要被页面结构调用，自动应用于所有元素。
优先级最低，容易被其他选择器覆盖。
通常用于重置浏览器的默认样式。

应用场景：

全局样式重置，如重置所有元素的内外边距。
测试或调试时临时设置所有元素的样式。
在特定情况下需要统一控制所有元素的样式。

2.5 基础选择器优先级比较

基础选择器的优先级从高到低依次是：

ID 选择器：优先级最高，因为它具有唯一性。
类选择器：优先级次之，可以应用于多个元素。
元素选择器：优先级较低，应用于所有同类型元素。
通配符选择器：优先级最低，应用于所有元素。

示例：

css

/* ID选择器（高优先级） */
#special {
  color: green;
}

/* 类选择器（中等优先级） */
.highlight {
  color: red;
}

/* 元素选择器（低优先级） */
p {
  color: blue;
}

/* 通配符选择器（最低优先级） */
* {
  margin: 0;
}

在 HTML 中，如果有一个段落元素同时应用了这些选择器：

html

<p id="special" class="highlight">这是一个段落。</p>

最终的文本颜色将是绿色，因为 ID 选择器的优先级最高，覆盖了其他选择器的样式。

三、复合选择器详解

复合选择器是将多个基础选择器综合运用起来，以更精确地选择元素。常见的复合选择器包括后代选择器、子选择器、并集选择器和交集选择器。

3.1 后代选择器

后代选择器用于选择某个元素的后代元素，即该元素的子元素、孙元素等。

语法：

css

父选择器 子选择器 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

div p {
  color: green;
}

应用方式：

在 HTML 结构中，任何位于<div>元素内部的<p>元素都会被选中：

html

<div>
  <p>这是一个段落。</p>
  <div>
    <p>这是另一个段落。</p>
  </div>
</div>

特点：

选择后代元素，可以是孙子元素、重孙子元素等。
选择器之间用空格分隔。
可以是任意基础选择器的组合（包括类选择器、ID 选择器）。
应用范围广，但可能导致样式过于广泛，需要谨慎使用。

应用场景：

选择特定容器内的所有子元素，如导航栏内的链接。
表格样式设置，如设置表格内所有单元格的样式。
文章内容区域的样式设置，如设置文章内所有段落的样式。

3.2 子选择器

子选择器用于选择某个元素的直接子元素，即只能选择亲儿子元素，不能选择孙子元素。

语法：

css

父选择器 > 子选择器 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

div > p {
  color: purple;
}

应用方式：

在 HTML 结构中，只有直接位于<div>元素内部的<p>元素会被选中：

html

<div>
  <p>这是一个段落。</p>
  <div>
    <p>这是另一个段落。</p>
  </div>
</div>

在这个例子中，第一个<p>元素会被选中，而第二个<p>元素不会被选中，因为它是<div>的孙子元素。

特点：

选择子元素，只能选亲儿子，不能选孙子。
选择器之间用>分隔。
比后代选择器更精确，避免样式被意外应用到深层嵌套的元素。
应用范围相对较窄，需要明确的父子关系。

应用场景：

选择特定元素的直接子元素，如导航栏的直接子链接。
网格布局中，选择容器的直接子元素进行布局。
避免深层嵌套元素的样式冲突，如只设置直接子元素的样式。

3.3 并集选择器

并集选择器用于选择多个元素，将多个选择器组合在一起，为它们应用相同的样式。

语法：

css

选择器1,
选择器2,
选择器3 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

h1,
h2,
h3 {
  color: red;
}

应用方式：

在 HTML 中，所有的<h1>、<h2>和<h3>元素都会被选中：

html

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

特点：

用于选择多组标签，表示 "或" 的关系。
通过逗号分隔多个选择器，表示同时选中这些元素。
任何基础选择器都可以使用并集选择器。
可以提高代码复用性，减少重复的样式声明。

应用场景：

统一设置多个标题元素的样式。
为不同类型的元素应用相同的样式，如按钮和链接。
批量设置多个元素的公共样式，如导航栏中的不同元素。

3.4 交集选择器

交集选择器用于选择同时满足多个条件的元素，即同时匹配多个选择器的元素。

语法：

css

选择器1选择器2 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

特点：

由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器或者 id 选择器。
两个选择器之间不能有空格。
选择器可以是 class，也可以是 id，还可以是标签，但标签要放在前面。
表示 "并且" 的意思，即同时满足两个条件。

示例 1：

css

h1.red {
  color: red;
}

应用方式：

在 HTML 中，只有同时是<h1>标签且具有 red 类的元素会被选中：

html

<h1 class="red">红色标题</h1>
<h2 class="red">红色二级标题</h2>

在这个例子中，第一个<h1>元素会被选中，而第二个<h2>元素不会被选中，因为它不是<h1>标签。

示例 2：

css

p#pink {
  color: pink;
}

应用方式：

在 HTML 中，只有同时是<p>标签且 id 为 pink 的元素会被选中：

html

<p id="pink">粉色段落</p>
<span id="pink">粉色span元素</span>

在这个例子中，第一个<p>元素会被选中，而第二个<span>元素不会被选中，因为它不是<p>标签。

示例 3：

css

.red#pink {
  color: blue;
}

应用方式：

在 HTML 中，同时具有 red 类和 pink ID 的元素会被选中：

html

<p class="red" id="pink">蓝色段落</p>

应用场景：

选择特定类型的元素并具有特定类或 ID。
避免使用过多的类或 ID，简化 HTML 结构。
在特定情况下需要精确选择元素，如表单中的特定输入类型。

3.5 相邻兄弟选择器

相邻兄弟选择器用于选择紧跟在另一个元素后面的元素，且二者有相同的父元素。

语法：

css

前一个元素 + 后一个元素 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

h1 + p {
  margin-top: 20px;
}

应用方式：

在 HTML 中，紧跟在<h1>元素之后的<p>元素会被选中：

html

<h1>标题</h1>
<p>紧跟在标题后的段落</p>
<p>另一个段落</p>

在这个例子中，第一个<p>元素会被选中，而第二个<p>元素不会被选中，因为它不是紧跟在<h1>之后。

特点：

选择紧跟在另一个元素后的元素。
两个元素必须有相同的父元素。
必须通过+连接。
只选择紧邻的下一个元素，不会选择后续的多个元素。

应用场景：

设置标题与后续段落之间的间距。
在列表中设置特定项之间的分隔线。
为特定元素后的第一个元素添加特殊样式。

3.6 通用兄弟选择器

通用兄弟选择器用于选择在同一父元素中位于另一个元素之后的所有兄弟元素。

语法：

css

前一个元素 ~ 后一个元素 {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

h1 ~ p {
  color: red;
}

应用方式：

在 HTML 中，所有位于<h1>元素之后且具有相同父元素的<p>元素都会被选中：

html

<h1>标题</h1>
<p>第一个段落</p>
<div>
  <p>第二个段落</p>
</div>
<p>第三个段落</p>

在这个例子中，第一个和第三个<p>元素会被选中，而第二个<p>元素不会被选中，因为它位于<div>元素内部，与<h1>没有相同的父元素。

特点：

选择在同一父元素中位于另一个元素之后的所有兄弟元素。
两个元素必须有相同的父元素。
通过~分隔两个选择器。
选择所有后续的兄弟元素，而不仅仅是紧邻的一个。

应用场景：

设置某个元素之后的所有兄弟元素的样式。
在列表中设置多个元素的公共样式。
为特定元素之后的所有同类元素添加特殊样式。

四、伪类选择器详解

伪类选择器用于选择处于特定状态或位置的元素，通常用于创建交互效果或选择特定位置的元素。

4.1 链接伪类选择器

链接伪类选择器用于选择不同状态的链接，如未访问、已访问、悬停和激活状态。

语法：

css

a:link {
  /* 未访问链接的样式 */
}

a:visited {
  /* 已访问链接的样式 */
}

a:hover {
  /* 鼠标悬停时的样式 */
}

a:active {
  /* 激活状态（鼠标按下未释放）的样式 */
}

特点：

选择不同状态的链接。
通常按照 LVHA 顺序书写（:link、:visited、:hover、:active）。
:hover 和:active 可以应用于其他元素，不仅仅是链接。
已访问链接的样式可能受到浏览器隐私设置的限制。

示例：

css

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

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

应用方式：

在 HTML 中，任何<a>元素都会根据其状态自动应用相应的样式：

html

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

注意事项：

按照 LVHA 的顺序书写，例如把:active 拿到前面去，就会导致:active 失效。
浏览器的<a>标签都有默认样式，一般实际开发都需要单独制定样式。
实际开发主要给链接做一个样式，然后给:hover 做一个样式即可，:link、:visited、:active 用的不多。

4.2 焦点伪类选择器:focus

焦点伪类选择器:focus用于选择获得焦点的元素，常用于表单控件（如<input>、<textarea>等）获得焦点时应用特定样式。

语法：

css

元素:focus {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例：

css

input:focus {
  border-color: blue;
  outline: none;
}

应用方式：

在 HTML 中，当<input>元素获得焦点时，会应用相应的样式：

html

<input type="text" placeholder="点击我获得焦点" />

特点：

选择被选中的元素。
主要用于表单元素，提高用户体验。
可以自定义聚焦状态的样式，如边框颜色和阴影。
与:hover不同，:focus可以通过键盘导航触发。

应用场景：

表单元素聚焦时的样式反馈。
可聚焦元素（如按钮、链接）的交互效果。
提高可访问性，帮助用户了解当前聚焦的元素。

4.3 结构伪类选择器:first-child

:first-child 伪类选择器用于匹配父元素中的第一个子元素。

语法：

css

元素:first-child {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例 1：

css

p:first-child {
  font-size: 2em;
}

应用方式：

在 HTML 中，如果一个<p>元素是其父元素的第一个子元素，它将被选中：

html

<article>
  <p>第一个段落...</p>
  <p>第二个段落...</p>
</article>

在这个例子中，第一个<p>元素会被选中，因为它是<article>元素的第一个子元素。

示例 2：如果父元素的第一个子元素不是<p>元素，则:first-child 选择器不会选中任何<p>元素：

html

<article>
  <h1>标题</h1>
  <p>第一个段落...</p>
  <p>第二个段落...</p>
</article>

在这种情况下，使用:first-child 选择器将不会选中任何<p>元素，因为第一个子元素是<h1>元素。

特点：

选择父元素中的第一个子元素。
如果元素不是父元素的第一个子元素，则不会被选中。
可以与其他选择器组合使用，如li:first-child选择列表中的第一个列表项。
与:first-of-type不同，后者选择同类型中的第一个元素，而不是第一个子元素。

应用场景：

选择列表中的第一个列表项，如导航栏的第一个链接。
设置段落中的第一个子元素的特殊样式。
在排版中创建特殊效果，如首字下沉。

4.4 结构伪类选择器:nth-child ()

:nth-child () 伪类选择器用于选择父元素中的第 n 个子元素，可以使用数字、关键字或表达式来指定要选中的子元素。

语法：

css

元素:nth-child(表达式) {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例 1：

css

li:nth-child(2) {
  color: red;
}

应用方式：

在 HTML 中，第二个<li>元素会被选中：

html

<ul>
  <li>第一项</li>
  <li>第二项（红色）</li>
  <li>第三项</li>
</ul>

示例 2：

使用表达式2n选择偶数项：

css

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

示例 3：

使用表达式2n+1选择奇数项：

css

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

示例 4：

使用表达式3n+1选择第 1、4、7... 项：

css

li:nth-child(3n + 1) {
  background-color: skyblue;
}

示例 5：

使用关键字odd选择奇数项：

css

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

示例 6：

使用关键字even选择偶数项：

css

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

示例 7：

使用表达式-n+3选择前 3 项：

css

li:nth-child(-n + 3) {
  font-weight: bold;
}

特点：

可以精确控制页面元素的样式。
n 的公式是：n=an+b，a 和 b 是整数，n 是正整数。
n=1 时，选择第一个子元素；n=2 时，选择第二个子元素；以此类推。
可以与其他选择器组合使用，如 p:nth-child(3)选择第三个段落。

应用场景：

创建斑马条纹表格或列表。
分页导航中的特殊样式设置。
幻灯片或轮播图中的特定面板样式。

4.5 否定伪类选择器:not ()

否定伪类选择器:not () 用于选择不符合特定条件的元素。

语法：

css

:not(选择器) {
  属性1: 值1;
  属性2: 值2;
  ...;
}

示例 1：

css

li:not(:first-child) {
  margin-top: 10px;
}

应用方式：

在 HTML 中，除了第一个<li>元素之外的所有列表项都会被选中：

html

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

示例 2：

css

input:not([type="submit"]) {
  border: 1px solid #ccc;
}

应用方式：

在 HTML 中，除了提交按钮之外的所有输入元素都会被选中：

html

<input type="text" />
<input type="password" />
<input type="submit" value="提交" />

特点：

选择不符合特定条件的元素。
参数可以是任何选择器，如类选择器、ID 选择器、元素选择器等。
可以嵌套使用，但可能会降低可读性。
提高选择器的灵活性，减少重复的样式声明。

应用场景：

排除特定元素，如排除第一个或最后一个元素。
表单中排除特定类型的输入元素。
在复杂布局中排除不需要应用样式的元素。

五、选择器优先级与特异性

5.1 选择器优先级规则

当多个选择器应用于同一元素时，浏览器会根据优先级规则决定应用哪个样式。选择器的优先级由其特异性（Specificity）决定，特异性越高的选择器优先级越高。

优先级从高到低的顺序：

!important 声明：可以为任何声明添加!important标记，使其优先级高于其他所有样式，包括行内样式。但应谨慎使用，因为它可能导致样式难以维护。
行内样式：直接在 HTML 标签中使用style属性定义的样式，优先级最高。
ID 选择器：使用#id形式的选择器。
类选择器、属性选择器、伪类选择器：使用.class、[attr]、:hover等形式的选择器。
元素选择器、伪元素选择器：使用标签名、::before等形式的选择器。
通配符选择器：使用*形式的选择器，优先级最低。

示例：

css

/* 行内样式（最高优先级） */
<p style="color: purple;">紫色文本</p>

/* ID选择器（高优先级） */
#special {
  color: green;
}

/* 类选择器（中等优先级） */
.highlight {
  color: red;
}

/* 伪类选择器（中等优先级） */
a:hover {
  color: orange;
}

/* 元素选择器（低优先级） */
p {
  color: blue;
}

/* 通配符选择器（最低优先级） */
* {
  margin: 0;
}

在这个例子中，行内样式的优先级最高，因此文本将显示为紫色，而不是其他颜色。

5.2 特异性计算方法

特异性是一个计算值，由选择器中包含的 ID 选择器、类选择器和元素选择器的数量决定。计算方法如下：

ID 选择器：每个 ID 选择器计为 100 分。
类选择器、属性选择器、伪类选择器：每个计为 10 分。
元素选择器、伪元素选择器：每个计为 1 分。
通配符选择器：计为 0 分。

示例 1：

css

div p {
  color: red;
}

这个选择器的特异性为：0 个 ID 选择器（0） + 0 个类选择器（0） + 2 个元素选择器（2） = 2 分。

示例 2：

css

div .highlight {
  color: blue;
}

这个选择器的特异性为：0 个 ID 选择器（0） + 1 个类选择器（10） + 1 个元素选择器（1） = 11 分。

示例 3：

css

#header .nav li {
  color: green;
}

这个选择器的特异性为：1 个 ID 选择器（100） + 1 个类选择器（10） + 2 个元素选择器（2） = 112 分。

示例 4：

css

div#header .nav li:first-child {
  color: purple;
}

这个选择器的特异性为：1 个 ID 选择器（100） + 1 个类选择器（10） + 3 个元素选择器（3） + 1 个伪类选择器（10） = 123 分。

5.3 优先级冲突解决

当多个选择器应用于同一元素时，浏览器会按照以下步骤确定最终应用的样式：

收集所有应用于该元素的样式规则。
根据特异性值确定这些规则的优先级。
应用特异性值最高的规则。
如果特异性值相同，则应用后定义的样式（后写的样式覆盖先写的样式）。
如果所有条件都相同，则应用继承的样式或浏览器默认样式。

示例：

css

/* 特异性值为100 */
#content {
  color: red;
}

/* 特异性值为10 */
.content {
  color: blue;
}

/* 特异性值为1 */
div {
  color: green;
}

在 HTML 中，如果有一个元素同时匹配这三个选择器： <div id="content" class="content">文本</div>

最终的文本颜色将是红色，因为#content 选择器的特异性值最高（100），覆盖了其他选择器的样式。

注意事项：

行内样式的优先级高于 ID 选择器。
!important声明可以覆盖任何其他样式，包括行内样式。
避免过度使用!important，因为它会破坏样式的层叠性，导致维护困难。
特异性值只计算选择器中的成分，不考虑 HTML 结构。

六、最佳实践与常见问题

6.1 CSS 选择器最佳实践

避免使用行内样式：

行内样式会导致结构和样式紧密耦合，难以维护。
优先使用外部样式表或内部样式表。

优先使用类选择器：

类选择器具有良好的复用性和中等优先级，适合大多数场景。
使用有意义的类名，如.nav、.button 等，而不是.red、.large 等描述外观的类名。

避免使用 ID 选择器进行样式设置：

ID 选择器特异性高，容易导致样式难以覆盖。
ID 选择器更适合用于 JavaScript 操作，而不是样式设置。

控制选择器的长度：

选择器链越长，特异性越高，越难覆盖。
后代选择器不超过 3 层，避免过度嵌套。

善用继承特性：

字体、颜色等属性可以通过继承传递给子元素，减少重复声明。
利用继承特性简化代码，如在父元素设置字体样式，子元素自动继承。

使用注释和组织代码：

对复杂的选择器和样式块添加注释，提高代码可读性。
按模块或功能组织 CSS 代码，如将导航样式、表单样式等分组。

避免使用通配符选择器：

通配符选择器会影响性能，尤其是在大型页面中。
如需重置样式，使用更精确的选择器，如* { margin: 0; padding: 0; }。

响应式设计考虑：

使用媒体查询和相对单位（如 %、rem、em）创建响应式布局。
避免使用绝对单位（如 px），以提高布局的灵活性。

6.2 常见问题及解决方法

问题 1：样式不生效

可能原因：选择器优先级不够，被其他选择器覆盖。
解决方案：
使用浏览器开发者工具检查元素的计算样式，查看实际应用的样式。
提高选择器的优先级，如添加类选择器或 ID 选择器。
检查选择器是否正确匹配 HTML 元素，如标签名、类名或 ID 是否拼写正确。

问题 2：样式覆盖预期

可能原因：后定义的样式覆盖了先定义的样式。
解决方案：
调整样式的顺序，将需要优先应用的样式放在后面。
使用更精确的选择器，提高其优先级。
避免使用相同特异性的选择器，明确优先级关系。

问题 3：选择器过于宽泛

可能原因：使用了过于宽泛的选择器，如通配符选择器或后代选择器。
解决方案：
使用更精确的选择器，如子选择器或类选择器。
限制选择器的范围，如在父元素上添加类名，然后使用后代选择器。
避免使用全局选择器，如*，除非必要。

问题 4：伪类选择器不生效

可能原因：伪类的顺序不正确，如:hover 出现在:visited 之前。
解决方案：
遵循 LVHA 顺序（:link、:visited、:hover、:active）定义链接伪类。
确保伪类应用于正确的元素，如:hover 可以应用于任何元素，但:active 通常用于可点击元素。
检查浏览器兼容性，某些伪类可能在旧浏览器中不支持。

问题 5：特异性冲突

可能原因：多个选择器的特异性值相同，导致样式不稳定。
解决方案：
明确选择器的优先级，避免特异性值相同的情况。
使用更具体的选择器，如添加类名或 ID。
必要时使用!important 声明，但应谨慎使用。

6.3 浏览器兼容性处理

使用浏览器前缀：

某些 CSS 属性需要浏览器特定的前缀，如-webkit-、-moz-等。
使用自动前缀工具（如 Autoprefixer）自动添加必要的前缀。

渐进增强与优雅降级：

编写基础样式，然后为现代浏览器添加高级功能（渐进增强）。
先为现代浏览器编写完整的样式，再为旧浏览器提供简化版本（优雅降级）。

功能检测：

使用 JavaScript 或 CSS feature queries 检测浏览器是否支持特定功能。
根据检测结果应用不同的样式。

特定浏览器处理：

使用条件注释（仅 IE 支持）为特定版本的 IE 提供特定样式。
使用 CSS hack 为特定浏览器提供样式，但应谨慎使用，避免过度依赖。

七、总结

通过本文的学习，你已经掌握了 CSS 选择器的基础知识，包括：

基础选择器：元素选择器、类选择器、ID 选择器和通配符选择器，它们是 CSS 选择器的基础。
复合选择器：后代选择器、子选择器、并集选择器和交集选择器，用于更精确地选择元素。
伪类选择器：链接伪类、焦点伪类、结构伪类等，用于选择特定状态或位置的元素。
优先级与特异性：理解选择器的优先级规则，解决样式冲突问题。
最佳实践与常见问题：编写高效、可维护的 CSS 代码，避免常见问题。

CSS 选择器是 CSS 的核心组成部分，掌握选择器的使用对于创建美观、高效的网页至关重要。通过不断实践和尝试，你将能够灵活运用各种选择器，实现复杂的布局和交互效果。

记住，选择器的选择应该遵循 "合适优先，而非强大优先" 的原则，选择最简单、最直接的选择器来实现所需的效果。避免过度使用复杂的选择器，保持代码的简洁和可维护性。

随着你的不断学习和实践，你会发现 CSS 选择器的灵活性和强大功能，为你的网页设计提供更多可能性。希望本文能帮助你建立扎实的 CSS 选择器基础，为进一步学习前端开发打下良好的基础。

f01 html

f02 html5

01 SVG

02 Canvas

s01 示例代码

f01 CSS

f02 CSS3

a00 浏览器相关

a01 基础语法

a02 函数

a03 对象

a04 数组

a05 ECMAScript标准

01 ES6

e01 Promise

e02 内置函数

u01 其他

a01 快速入门

a01 基础类型

a02 引用类型

a02 类型理解

a03 类型编程

01 实例

a04 类和接口

a05 函数与泛型

a06 装饰器

a07 工程化

a08 示例

f02 词法分析

f03 语法分析

f04 正则表达式

f01 OAuth

f01 Mobile

f02 PC

f01 浏览器

f02 网络通信

f03 性能

f04 安全

CSS 选择器基础入门：从零基础到精通 ​

一、CSS 选择器概述 ​

1.1 什么是 CSS 选择器 ​

1.2 CSS 选择器的重要性 ​

1.3 CSS 选择器的分类 ​

二、基础选择器详解 ​

2.1 元素选择器（标签选择器） ​

语法： ​

特点： ​

应用场景： ​

2.2 类选择器 ​

语法： ​

特点： ​

命名规范： ​

应用场景： ​

2.3 ID 选择器 ​

语法： ​

特点： ​

类比： ​

应用场景： ​

2.4 通配符选择器 ​

语法： ​

特点： ​

应用场景： ​

2.5 基础选择器优先级比较 ​

三、复合选择器详解 ​

3.1 后代选择器 ​

语法： ​

特点： ​

应用场景： ​

3.2 子选择器 ​

语法： ​

特点： ​

应用场景： ​

3.3 并集选择器 ​

语法： ​

特点： ​

应用场景： ​

3.4 交集选择器 ​

语法： ​

特点： ​

应用场景： ​

CSS 选择器基础入门：从零基础到精通

一、CSS 选择器概述

1.1 什么是 CSS 选择器

1.2 CSS 选择器的重要性

1.3 CSS 选择器的分类

二、基础选择器详解

2.1 元素选择器（标签选择器）

语法：

特点：

应用场景：

2.2 类选择器

语法：

特点：

命名规范：

应用场景：

2.3 ID 选择器

语法：

特点：

类比：

应用场景：

2.4 通配符选择器

语法：

特点：

应用场景：

2.5 基础选择器优先级比较

三、复合选择器详解

3.1 后代选择器

语法：

特点：

应用场景：

3.2 子选择器

语法：

特点：

应用场景：

3.3 并集选择器

语法：

特点：

应用场景：

3.4 交集选择器

语法：

特点：

应用场景：

3.5 相邻兄弟选择器

语法：

特点：

应用场景：

3.6 通用兄弟选择器

语法：

特点：

应用场景：

四、伪类选择器详解

4.1 链接伪类选择器

语法：

特点：

应用方式：

注意事项：

4.2 焦点伪类选择器:focus

语法：

应用方式：

特点：

应用场景：

4.3 结构伪类选择器:first-child

语法：

应用方式：

特点：

应用场景：

4.4 结构伪类选择器:nth-child ()

语法：

应用方式：

特点：

应用场景：

4.5 否定伪类选择器:not ()

语法：

特点：

应用场景：

五、选择器优先级与特异性

5.1 选择器优先级规则

优先级从高到低的顺序：

5.2 特异性计算方法

5.3 优先级冲突解决