CSS 选择器教程

CSS 选择器是网页样式设计中的重要组成部分，它决定了网页元素的样式呈现。本教程将详细介绍 CSS 选择器的使用方法。

基本选择器

CSS 选择器主要分为以下几类：

元素选择器：选择所有指定类型的元素，例如 p 选择所有段落元素。
类选择器：选择所有具有指定类的元素，例如 .class 选择所有类名为 class 的元素。
ID 选择器：选择具有指定 ID 的元素，例如 #id 选择 ID 为 id 的元素。

属性选择器

属性选择器可以根据元素的属性值来选择元素，例如 [type="text"] 选择所有 type 属性值为 text 的元素。

伪类选择器

伪类选择器用于选择处于特定状态下的元素，例如 :hover 选择鼠标悬停的元素。

选择器优先级

当多个选择器同时作用于一个元素时，它们的优先级如下：

内联样式
ID 选择器
类选择器、属性选择器、伪类选择器
元素选择器

实例

以下是一个使用 CSS 选择器的示例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS 选择器示例</title>
  <style>
    p {
      color: red;
    }
    .example {
      font-weight: bold;
    }
    #example {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p class="example" id="example">这是一个示例。</p>
</body>
</html>

在上面的示例中，<p> 元素的颜色为红色，<p> 元素中类名为 example 的文本加粗，<p> 元素中 ID 为 example 的文本加下划线。

扩展阅读

更多关于 CSS 选择器的信息，请访问我们的 CSS 选择器详细教程。

图片示例