[分享]css中10种样式选择器

CSS中有10种样式选择器，它们分别是：1. 元素选择器 2. ID选择器 3. 类选择器 4. 属性选择器 5. 后代选择器 6. 相邻兄弟选择器 7. 通用兄弟选择器 8. 子元素选择器 9. 伪...

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种样式选择器的介绍。根据每个元素的不同属性进行不同的选择，可以让页面更加丰富多彩。