Lesson03_02 样式规则选择器

1. 什么是样式规则选择器

样式规则选择器是 CSS 中一种用来选择特定 HTML 元素并为其应用样式的方法。通过选择器，我们可以选择要样式化的特定元素，然后定义应用于该元素的样式规则。

在 CSS 中，有很多不同类型的选择器，包括标签选择器、类选择器、ID 选择器、属性选择器等。这些选择器可以单独使用或者一起组合使用，以选择特定的元素进行样式化。

2. 样式规则选择器的语法

样式规则选择器的基本语法是：选择器 { 属性: 值; }

其中，选择器指定要样式化的 HTML 元素，属性表示要设置的样式属性，值为该属性的具体取值。

举个例子，假设我们要将文本颜色设置为红色，可以使用标签选择器来实现：

p {
  color: red;
}

在上面的例子中，选择器是 p，表示选择所有的 <p> 元素，color 是属性，red 是属性的取值。

3. 标签选择器

标签选择器是最简单且最常用的选择器之一，通过指定 HTML 元素的标签名来选择元素。只要使用元素的标签名作为选择器，就可以将样式应用于所有该类型的元素。

例如，下面的 CSS 代码将把所有 <p> 元素的文本颜色设置为红色：

p {
  color: red;
}

4. 类选择器

类选择器用于选择带有特定类名的元素。通过为元素指定一个或多个类名，并使用点号作为前缀，即可定义类选择器。

例如，下面的 CSS 代码将把所有类为 "highlight" 的元素的背景颜色设置为黄色：

.highlight {
  background-color: yellow;
}

然后，在 HTML 中，我们可以将这个类名应用于特定的元素，如 <div> 或 <span>：

<div class="highlight">这个元素的背景将变成黄色</div>
<span class="highlight">这个元素的背景也将变成黄色</span>

5. ID 选择器

ID 选择器用于选择具有特定 ID 的元素。通过为元素指定一个唯一的 ID，并使用井号作为前缀，即可定义 ID 选择器。

例如，下面的 CSS 代码将把 ID 为 "logo" 的元素的宽度设置为 200 像素：

#logo {
  width: 200px;
}

然后，在 HTML 中，我们可以将这个 ID 应用于特定的元素，如 <img>：

<img id="logo" src="logo.png" alt="网站的Logo">

6. 属性选择器

属性选择器用于选择具有特定属性或属性值的元素。通过指定方括号内的属性名或属性名和属性值，即可定义属性选择器。

例如，下面的 CSS 代码将选择所有带有 target="_blank" 属性的链接，并将它们的文本颜色设置为蓝色：

a[target="_blank"] {
  color: blue;
}

总结

样式规则选择器是 CSS 中重要的概念，通过选择器可以选择要样式化的特定元素。在本文中，我们介绍了标签选择器、类选择器、ID 选择器和属性选择器这些常见的选择器。

希望上述内容可以帮助您更好地理解和应用样式规则选择器。