css9种选择器

CSS是前端开发的重要组成部分之一，能够定义一个网页的样式和布局。在CSS中，选择器则是定义样式的关键。选择器有很多种，其中有9种是最为常见的，下面我们就来看一下这9种选择器。

1. ID选择器
#idname{
  /*样式*/
} 

通过ID选择器，可以选中具有特定ID属性的HTML元素，并对其应用样式。

2. 类选择器
.classname{
  /*样式*/
} 

通过类选择器，可以选中具有特定类名的HTML元素，并对其应用样式。

3. 元素选择器
elementname{
  /*样式*/
} 

通过元素选择器，可以选中特定元素类型的HTML元素，并对其应用样式。例如，选中所有的p标签。

4. 后代选择器
elementname1 elementname2{
  /*样式*/
} 

后代选择器表示选中某个元素下面的子孙元素。例如，选中某个div中嵌套的所有p标签。

5. 子元素选择器
elementname1 > elementname2{
  /*样式*/
} 

子元素选择器表示只选中某个元素的直接子元素，而不是子孙元素。例如，只选中某个div下的直接子级p标签。

6. 相邻兄弟选择器
elementname1 + elementname2{
  /*样式*/
} 

相邻兄弟选择器表示选中紧接在某个元素后面的兄弟元素。例如，选中某个div下的紧接着的一个p标签。

7. 通用兄弟选择器
elementname1 ~ elementname2{
  /*样式*/
} 

通用兄弟选择器表示选中所有在某个元素后面的兄弟元素，而不仅仅是紧接着的一个元素。例如，选中所有在某个div下的p标签。

8. 属性选择器
[attr=value]{
  /*样式*/
} 

属性选择器表示选中带有指定属性的HTML元素，并对其应用样式。例如，选中所有带有属性data-type="text"的p标签。

9. 伪类选择器
elementname:pseudo-class{
  /*样式*/
} 

伪类选择器表示选中特定状态下的HTML元素，并对其应用样式。例如，选中一个链接的鼠标悬浮状态下的样式。