CSS选择器种类及及其使用介绍

CSS 选择器种类及其使用介绍

在 Web 开发中，CSS 是重要的技术之一，其中选择器（Selector）是 CSS 中非常基础且重要的一部分。选择器用于从 HTML 中选取一个或多个元素，并对其设置样式。在 CSS 中，共有众多不同的选择器，可以根据不同需求来细致选择元素，下面我们来详细介绍常见的选择器。

元素选择器

元素选择器是最简单的选择器，它直接使用 HTML 标签进行选择，比如选择所有的 div 元素，只需写出以下代码：

div {
  color: red;
}

类选择器

类选择器通过给元素添加 class 属性来选定元素。类选择器以 . 开头，后面跟类名，比如：

.my-class {
  font-size: 16px;
}

以上代码定义了一个类选择器 my-class，想要应用样式的元素只需要在 HTML 中添加该类名即可：

<div class="my-class">Hello</div>

ID 选择器

ID 选择器通过给元素添加 id 属性来选定元素，ID 选择器以 # 开头，后面跟 ID 名称，比如：

#my-id {
  background-color: yellow;
}

以上代码定义了一个 ID 选择器 my-id，想要应用样式的元素只需要在 HTML 中添加该 ID 即可：

<div id="my-id">World</div>

需要注意的是，ID 在 HTML 中必须是唯一的，一个页面中只能有一个相同的 ID。

后代选择器

后代选择器用来选择某个元素下的子孙元素，它将所有满足条件的元素全部选择出来。后代选择器使用空格来进行表示，比如：

div p {
  font-size: 18px;
}

以上代码选择了 div 元素下所有的 p 元素，并将所有这些元素的字体大小设为 18 像素。

子元素选择器

子元素选择器用于选择某个元素下的子元素，它只会选择符合条件的子元素。子元素选择器使用 > 符号来进行表示，比如：

ul > li {
  color: blue;
}

以上代码选择了 ul 元素下的所有 li 元素，并将字体颜色设为蓝色。

伪类选择器

伪类选择器用于选择元素的特定状态，常见的有 :hover、:active、:visited 以及 :first-child 等。比如：

a:hover {
  color: yellow;
}

以上代码选择所有鼠标滑过的链接，并将字体颜色设为黄色。

组合选择器

组合选择器将多个选择器一起使用，以选定更具体的元素。有以下几种组合方式：

• 选择多个元素：可以将多个元素选择器用 , 进行分隔，比如：

css
h1, h2, h3 {
color: green;
}

• 选择同时满足条件的元素：可以将多个选择器一起使用，中间不加任何符号，比如：

css
div.my-class {
font-size: 14px;
}

以上代码选择所有 class 为 my-class 的 div 元素，并将字体大小设为 14 像素。

• 选择父元素下的子元素：可以将两个选择器使用空格分隔，用来选择父元素下的所有符合条件的子元素，比如：

css
div p {
color: red;
}

以上代码选择所有 div 元素下的 p 元素，并将字体颜色设为红色。

结论

CSS 的选择器有很多种，每一种都为我们在编写样式时提供了不同的选择。掌握这些选择器，可以更加灵活地控制页面样式，达到所需的效果。

示例1

下面是一个使用组合选择器的示例，将所有 div 标签中的 p 标签中的文本加粗显示：

div p {
  font-weight: bold;
}

示例2

下面是一个使用类选择器的示例，将所有 class 为 button 的按钮元素的背景设为蓝色，字体颜色设为白色：

.button {
  background-color: blue;
  color: white;
}