CSS 选择器浅谈

CSS 选择器是指在样式表中使用的语法，用于选择 HTML 或 XML 文档中的特定元素，并将样式应用于这些元素。在本篇文章中，我们将深入探讨 CSS 选择器的各种类型，以及如何使用它们来选择不同的 HTML 元素。

基础选择器

元素选择器

元素选择器是 CSS 中最简单的选择器之一，也是最常用的。它可以通过元素名称直接选取特定的 HTML 元素，例如：

p {
  color: red;
}

这个简单的选择器将作用于所有 <p> 元素，并将它们的文本颜色改为红色。

类选择器

类选择器是通过 HTML 中的 class 属性来选择元素的。它可以为一个或多个元素定义相同的样式，例如：

.red-text {
  color: red;
}

<p class="red-text">This text will be red.</p>

这个选择器定义了一个类 .red-text，它将被应用于具有 class="red-text" 属性的 HTML 元素。在这个例子中，我们定义了一个 <p> 元素，它将使用 .red-text 类。因此，这个元素的文本颜色将变为红色。

ID 选择器

ID 选择器是通过 HTML 中的 id 属性来选择元素的。它只能选择一个特定的元素，并且每个元素只能拥有一个唯一的 id 属性。例如：

#header {
  background-color: blue;
}

<div id="header">This is the header section.</div>

这个选择器定义了一个 #header ID，在 HTML 中使用 <div> 元素来指定，这个元素的背景颜色将变为蓝色。

层级选择器

层级选择器用于指定元素之间的父子关系。它可以选择特定元素的子元素或后代元素，例如：

nav ul {
  list-style: none;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

这个选择器中的 nav ul 表示选择 <nav> 元素下的所有 <ul> 元素。在这个例子中，我们应用于列表项的样式将只作用于由这个选择器选中的 <ul> 元素。

伪类选择器

伪类选择器用于选中不同状态下的元素，例如 hover、active 和 focus 等状态。例如：

a:hover {
  text-decoration: underline;
}

<a href="#">Hover over me!</a>

这个选择器定义当用户将鼠标悬停在一个链接 (<a> 元素) 上时，将应用下划线样式，这个效果在用户鼠标离开链接时撤销。

示例

下面是一个示例，展示了如何将多个选择器组合在一起。

.header, #sidebar {
  font-size: 20px;
}

<div class="header">This text will be styled.</div>
<div id="sidebar">This text will also be styled.</div>

这个选择器选中了两个元素：一个类为 .header 的元素和一个 ID 为 #sidebar 的元素。它们都将应用相同的样式，将字体设置为 20 像素。

另一个示例，展示了如何使用伪类选择器：

.button:hover {
  background-color: #ccc;
}

<button class="button">Hover over me!</button>

在这个例子中，我们定义了一个 .button 类，当用户将鼠标悬停在按钮上时，将应用一种新的背景颜色（在本例中为灰色）。