【Web前端】“CSS”选择器是什么？-优快云博客

本文链接：https://blog.youkuaiyun.com/LEECOO666/article/details/141357267

在CSS中，选择器用于指定我们希望为其设置样式的HTML元素。CSS选择器提供了多种方法，使得我们可以非常精确地选择要样式化的元素。

一、选择器是什么？

在 CSS 中，选择器用于选择 HTML 元素以应用样式。选择器的作用是确定哪些元素会被样式规则影响。CSS 选择器可以根据元素的标签、类、ID、属性等多种方式进行选择。

选择器的基本结构：

selector {
  property: value;
}

selector：选择器，指定要选择的 HTML 元素。
property：样式属性，例如 color、font-size 等。
value：样式属性的值，例如 red、16px 等。

二、选择器类型

2.1 标签选择器（Type Selector）

标签选择器用于选择所有具有特定标签名的元素。例如，如果我们要选择所有的 <p> 元素，可以使用以下 CSS 规则：

p {
  color: blue;
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签选择器示例</title>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
  <p>Another paragraph.</p>
</body>
</html>

2.2 类选择器（Class Selector）

类选择器用于选择所有具有特定类属性的元素。类选择器以点（.）开头。例如，选择所有具有 highlight 类的元素：

.highlight {
  background-color: yellow;
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类选择器示例</title>
  <style>
    .highlight {
      background-color: yellow;
      font-weigh