【前端系列】CSS 常见的选择器

CSS 常用的选择器包括：

1. 标签选择器（Element selector）：直接使用元素名作为选择器，比如 div、p。
2. 类选择器（Class selector）：使用.前缀，比如.classname。
3. ID选择器（ID selector）：使用#前缀，比如#idname。
4. 群组选择器（Grouping selector）：使用逗号,分隔多个选择器，比如h1, h2, p。
5. 后代选择器（Descendant selector）：使用空格 分隔，表示嵌套关系，比如div a。
6. 子选择器（Child selector）：使用>表示直接子元素，比如div > p。
7. 相邻兄弟选择器（Adjacent sibling selector）：使用+表示紧跟在另一个元素后的元素，比如h1 + p。
8. 通用兄弟选择器（General sibling selector）：使用~表示同一父元素下的所有某一元素之后的兄弟元素，比如h1 ~ p。
9. 伪类选择器（Pseudo-class selector）：使用:前缀，表示元素的特殊状态，比如:hover、:active。
10. 伪元素选择器（Pseudo-element selector）：使用::前缀，表示元素的特定部分，比如::before、::after。

示例代码：

/* 标签选择器 */
div {
  background-color: blue;
}
 
/* 类选择器 */
.highlight {
  color: yellow;
}
 
/* ID选择器 */
#logo {
  width: 100px;
}
 
/* 群组选择器 */
h1, h2, p {
  margin: 0;
}
 
/* 后代选择器 */
div a {
  text-decoration: underline;
}
 
/* 子选择器 */
div > p {
  font-weight: bold;
}
 
/* 相邻兄弟选择器 */
h1 + p {
  color: green;
}
 
/* 通用兄弟选择器 */
h1 ~ p {
  font-style: italic;
}
 
/* 伪类选择器 */
a:hover {
  text-decoration: none;
}
 
/* 伪元素选择器 */
p::first-letter {
  font-size: 200%;
}