css中10种样式选择器

CSS中有10种样式选择器，它们分别是：

1. 元素选择器
2. ID选择器
3. 类选择器
4. 属性选择器
5. 后代选择器
6. 相邻兄弟选择器
7. 通用兄弟选择器
8. 子元素选择器
9. 伪类选择器
10. 伪元素选择器 

下面我们来一一了解它们。

1. 元素选择器

<p>使用元素名称作为选择器，用来匹配HTML中的元素。</p>

例如：p {
  color: red;
}

2. ID选择器

<p>使用ID属性选择器来选择HTML元素，ID选择器在页面中的唯一性。可以在一个页面中使用多个ID选择器，但不要重复。</p>

例如：#example {
  background-color: yellow;
}

3. 类选择器

<p>使用类名选择HTML元素。类名是由开发人员自己规定的，可以在多个元素中重复使用。</p>

例如：.example {
  font-size: 20px;
}

4. 属性选择器

<p>使用HTML元素的属性来选择样式。属性选择器可以通过元素的class, id, name或其他属性来选择对应的元素。</p>

例如：input[type="text"] {
  color: blue;
}

5. 后代选择器

<p>使用后代选择器可以选择一个元素的所有后代元素。</p>

例如：div p {
  color: green;
}

6. 相邻兄弟选择器

<p>选择紧接在另一个元素后面的元素。</p>

例如：h1 + p {
  color: red;
}

7. 通用兄弟选择器

<p>选择和另一个元素相邻的所有元素。</p>

例如：h1 ~ p {
  font-size: 24px;
}

8. 子元素选择器

<p>选择一个元素的所有直接子元素。</p>

例如：ul > li {
  color: purple;
}

9. 伪类选择器

<p>用来选择那些没有真正添加到文档树中的元素，比如链接的状态。</p>

例如：a:hover {
  color: orange;
}

10. 伪元素选择器

<p>它们被创建用于向某些选择器添加特殊效果。</p>

例如：p::first-letter {
  font-size: 36px;
}

以上就是CSS中10种样式选择器的介绍。根据每个元素的不同属性进行不同的选择，可以让页面更加丰富多彩。