CSS常见选择器详解以及应用场景案例

在CSS中，常用的选择器包括标签选择器、类选择器、ID选择器、通用选择器、群组选择器、伪类选择器和后代选择器等。以下是每种选择器的简单介绍和应用场景案例：

1. 标签选择器（Element Selector）：使用HTML标签作为选择器。适用于同一页面中的所有该标签的样式设置。

p {
  color: blue;
}

应用场景：通常用于设置页面基础样式。

2. 类选择器（Class Selector）：使用.前缀定义，可以被多个元素引用。

.my-class {
  background-color: yellow;
}

应用场景：常用于页面布局和设计中，用于区分不同的功能或样式区块。

3. ID选择器（ID Selector）：使用#前缀定义，在整个文档中唯一。

#my-id {
  border: 1px solid black;
}

应用场景：用于页面中唯一的元素，如页头、页脚或者模态框。

4. 通用选择器（Universal Selector）：用于选择所有元素，使用*表示。

* {
  margin: 0;
  padding: 0;
}

应用场景：用于重置或设置所有元素的默认样式。

5. 群组选择器（Group Selector）：使用,分隔多个选择器，选中任意一个。

h1, h2, h3 {
  color: green;
}

应用场景：用于集中设置多个标签的样式。

6. 伪类选择器（Pseudo-class Selector）：用于选择元素的特定状态，如:hover、:active、:focus等。

a:hover {
  text-decoration: underline;
}

应用场景：用于设置元素在特定状态下的样式，如按钮的悬停样式。

7. 后代选择器（Descendant Selector）：用于选中某个元素的后代（子元素或孙元素等）。

div a {
  color: purple;
}

应用场景：用于更精确地选择特定的后代元素并设置样式。

以上每种选择器都有其特定的用途和应用场景，开发者可以根据实际需求灵活运用。