CSS 选择器学习笔记

CSS 选择器是一种用来定位 HTML 元素的方法。使用 CSS 选择器可以让我们针对特定的 HTML 元素应用样式。在此，我们将介绍一些常用的 CSS 选择器和具体的使用案例。

元素选择器

元素选择器可以通过 HTML 元素名称匹配对应的元素。例如，选择所有的段落元素：

Copy Code
p {
  color: red;
}

这样所有的 p 元素都会应用这个规则。

类选择器可以匹配所有拥有相同类名的元素。例如，为所有具有 highlight 类的元素应用样式：

Copy Code
.highlight {
  background-color: yellow;
}

可以将一个类应用到 HTML 元素中：

Copy Code
<p class="highlight">这段文字有黄色背景。</p>

ID 选择器可以通过元素的 id 属性定位单个元素。例如，选择 myHeading 元素：

Copy Code
#myHeading {
  font-size: 30px;
}

可以使用 id 属性在 HTML 元素中定义一个 ID：

Copy Code
<h1 id="myHeading">这是一个标题</h1>

组合选择器可以将多个选择器组合在一起以缩小选择范围。例如，选择所有 h1 和 p 元素：

Copy Code
h1, p {
  font-family: Arial;
}

后代选择器可以选择某个元素的所有后代元素。例如，选择 article 元素中所有 p 元素：

Copy Code
article p {
  color: blue;
}

伪类选择器可以选择非静态状态的元素。例如，样式化所有鼠标悬停在链接上的状态：

Copy Code
a:hover {
  text-decoration: underline;
}

以上是一些常用的 CSS 选择器和使用案例，但远远不是全部。熟练掌握选择器对于成为一个优秀的前端开发人员至关重要。