第二章：选择器与规则

基础选择器

在这一章中，我们将深入探讨 CSS 中的基础选择器以及它们的使用方法。选择器是 CSS 的基础，通过选择器，我们可以灵活地选择和定义我们希望样式化的 HTML 元素。

元素选择器

元素选择器用于选择 HTML 文档中的所有某一类型的元素。例如，下面的 CSS 规则将应用于所有的 <p> 元素：

p {
  color: blue;
  font-size: 14px;
}

在这个例子中，所有的段落元素都会被设置为蓝色字体和 14 像素的字体大小。

类选择器

类选择器使用 HTML 元素的 class 属性来选择元素。通过类选择器，我们可以为多个不同的元素应用相同的样式。类选择器以一个点（.）开头，后跟类名，例如：

.highlight {
  background-color: yellow;
  font-weight: bold;
}

在 HTML 中使用该类：

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

以上 CSS 规则将会为所有包含 highlight 类的元素设置黄色背景和加粗字体。

ID 选择器

ID 选择器使用 HTML 元素的 id 属性来选择元素，ID 在文档中是唯一的。ID 选择器以井号（#）开头，后跟 ID 名，例如：

#header {
  background-color: lightgrey;
  padding: 10px;
}

在 HTML 中使用该 ID：

<div id="header">这是标题部分。</div>

以上 CSS 规则将会为 ID 为 header 的元素设置浅灰色背景和 10 像素的内边距。

组合选择器

组合选择器允许你通过组合多个选择器来更精确地选择元素。组合选择器的使用可以极大地增强 CSS 规则的灵活性。

后代选择器

后代选择器选择某一元素内的所有符合条件的后代元素。语法是通过空格分隔的两个选择器，例如，div p 选择所有位于 div 内的所有 p 元素：

div p {
  color: green;
}

在 HTML 中：

<div>
  <p>这是一个段落，将被选中。</p>
</div>
<p>这是另一个段落，不会被选中。</p>

以上 CSS 规则将会为位于 div 内的段落元素设置为绿色字体。

子选择器

子选择器选择某一元素内的直接子元素。语法是通过 > 分隔的两个选择器，例如，ul > li 选择 ul 元素内的直接 li 子元素：

ul > li {
  list-style-type: square;
}

在 HTML 中：

<ul>
  <li>直接子元素列表项</li>
  <li>直接子元素列表项</li>
  <ul>
    <li>嵌套子元素列表项，不会被选中</li>
  </ul>
</ul>

以上 CSS 规则将会为 ul 的直接 li 子元素设置方形的列表样式符号。

相邻兄弟选择器

相邻兄弟选择器选择紧接在另一个元素之后的兄弟元素。语法是通过 + 分隔的两个选择器，例如，h1 + p 选择紧接在 h1 之后的 p 元素：

h1 + p {
  margin-top: 0;
}

在 HTML 中：

<h1>标题</h1>
<p>紧接在 h1 后面的段落，将被选中。</p>
<h1>另一个标题</h1>
<div>
  <p>嵌套的段落，不会被选中。</p>
</div>

以上 CSS 规则将会为紧接在 h1 之后的段落元素设置无上边距。

通用兄弟选择器

通用兄弟选择器选择一个元素后面的所有兄弟元素。语法是通过 ~ 分隔的两个选择器，例如，h1 ~ p 选择 h1 之后的所有 p 元素：

h1 ~ p {
  color: darkred;
}

在 HTML 中：

<h1>标题</h1>
<p>将被选中的段落。</p>
<p>这也是一个将被选中的段落。</p>
<div>
  <p>嵌套的段落，不会被选中。</p>
</div>

以上 CSS 规则将会为 h1 之后的所有兄弟段落元素设置深红色字体。

伪类与伪元素

伪类和伪元素是选择器中的特殊类型，用于选择特定的元素状态或部分。它们在许多情况下非常有用，尤其是在交互式设计中。

常见伪类

伪类用于选择元素的特定状态。常见的伪类包括 :hover, :active, 和 :focus 等。

:hover

当用户将鼠标悬停在某个元素上时，hover 伪类将会应用样式。例如：

a:hover {
  color: red;
}

在 HTML 中：

<a href="#">悬停在此链接上，将变为红色。</a>

以上 CSS 规则将会在用户将鼠标悬停在链接上时，将链接的颜色变为红色。

:active

当某个元素被激活（通常是被点击时），active 伪类将会应用样式。例如：

button:active {
  background-color: darkblue;
}

在 HTML 中：

<button>点击我</button>

以上 CSS 规则将会在用户点击按钮时，将按钮的背景颜色变为深蓝色。

:focus

当某个元素获得焦点时，focus 伪类将会应用样式。例如：

input:focus {
  border-color: green;
}

在 HTML 中：

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

以上 CSS 规则将会在输入框获得焦点时，将输入框的边框颜色变为绿色。

常见伪元素

伪元素用于选择元素的某一部分或生成特定内容。常见的伪元素包括 ::before 和 ::after 等。

::before

::before 伪元素用于在某个元素的内容前插入内容。例如：

p::before {
  content: "注意: ";
  color: red;
  font-weight: bold;
}

在 HTML 中：

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

以上 CSS 规则将在段落内容前插入红色加粗的“注意: ”文本。

::after

::after 伪元素用于在某个元素的内容后插入内容。例如：

p::after {
  content: " - 结束";
  color: blue;
  font-style: italic;
}

在 HTML 中：

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

以上 CSS 规则将在段落内容后插入蓝色斜体的“ - 结束”文本。

【本章节完毕】