CSS Selector简介和实例展示

发布时间:2023-06-22 00:52

CSS Selector简介和实例展示

CSS Selector是什么？

在CSS中，Selector（选择器）用于选中HTML中的特定元素，以应用样式和效果。通过选择器，我们可以根据元素的标签名、类名、ID等属性来选择特定的元素。

常见的CSS选择器

下面是一些常用的CSS选择器：

1. 标签选择器

标签选择器是最简单和最常见的选择器。它通过HTML元素的标签名来选择元素。例如，使用标签选择器"p"可以选择所有的段落元素：

/*选择所有的段落元素*/
p {
  color: red;
  font-size: 16px;
}

2. 类选择器

类选择器通过HTML元素的"class"属性来选择元素。使用类选择器，我们可以为多个元素应用相同的样式：

/*选择所有具有"class"属性为"highlight"的元素*/
.highlight {
  background-color: yellow;
}

3. ID选择器

ID选择器通过HTML元素的"id"属性来选择元素。与类选择器不同，每个ID只能应用于一个元素：

/*选择具有"id"属性为"my-element"的元素*/
#my-element {
  border: 1px solid black;
}

实例展示

下面是一个使用以上选择器的实例：

标题
这是一个段落。
这是一个带有highlight类的段落。
这是一个具有my-element ID的段落。

配图：Unsplash API

以上是关于CSS Selector简介和实例展示的内容。希望对你有所帮助！