css的高级选择器使用

CSS高级选择器是一种用于选择特定元素的方法。它们允许我们根据元素的特定属性、层次关系、状态等进行选择。

下面是一些常用的CSS高级选择器：

CSS层次选择器是一种CSS选择器，用于选择HTML文档中特定的元素，其选择器由两个或多个选择器组合而成，中间用空格隔开。

1.层次选择器：

1. 后代选择器：通过元素的后代关系进行选择

后代选择器:E F{
	属性：值
}

2. 子元素选择器：通过父元素与子元素的直接关系进行选择

子代选择器 E>F{
	属性：值
}

3. 相邻兄弟选择器：通过相邻兄弟元素的关系进行选择

相邻选择器:E+F{
	属性：值
}

4. 通用兄弟选择器：通过兄弟元素的关系进行选择

通用选择器:E~F{
	属性：值
}

2.结构伪类选择器：

CSS结构伪类选择器用于根据元素在文档树中的位置来选择元素。以下是一些常用的CSS结构伪类选择器：

1. :first-child：选择作为其父元素的第一个子元素的元素。

E F:first-child--->(父元素E下面的第一个子元素F)

2. :last-child：选择作为其父元素的最后一个子元素的元素。

E F:last-child--->( 父元素E下面的最后一个子元素F)

3. :nth-child(n)：选择作为其父元素的第n个子元素的元素，n是一个整数。

E F:nth-child--->( 父元素E下面的第n个子元素F)

4. :first-of-type：选择作为其父元素的特定类型的第一个子元素的元素。

E F:first-of-type--->(父元素E下面第一个类型为F的子元素)

5. :last-of-type：选择作为其父元素的特定类型的最后一个子元素的元素。

E F:last-of-type--->(父元素E下面最后一个类型为F的子元素)

6. :nth-of-type(n)：选择作为其父元素的特定类型的第n个子元素的元素，n是一个整数。

E F:nth-of0type--->(父元素E下面n个类型为F的子元素)

3.属性选择器：

CSS属性选择器是一种CSS选择器，它允许选择具有特定属性和属性值的元素。属性选择器使用方括号（[]）来选择具有特定属性值的元素。

1. 属性选择器：[attribute] 选择具有指定属性的元素。

E[F]-->在E标签里面有F属性，就可以被选择

2. 属性值选择器：[attribute=value] 选择具有指定属性值的元素。

E[F="val"]-->在E标签里面不仅有F属性， 而且F属性值为val，就可以被选择

3. 后缀匹配属性选择器：[attribute$=value] 选择属性值以指定值结尾的元素。

E[F$="v"]-->在E标签里面不仅有F属性， 而且F属性值结尾为v，就可以被选择

4. 子串匹配属性选择器：[attribute*=value] 选择属性值中包含指定值的元素。

E[F*="v"]-->在E标签里面不仅有F属性， 而且F属性值包含为v的，就可以被选择

5. 前缀匹配属性选择器：[attribute^=value] 选择属性值以指定值开头的元素。
   E[F^=“v”]–>在E标签里面不仅有F属性， 而且F属性值开头为v，就可以被选择

这些结构伪类选择器可以用来更精确地选择HTML元素，使得CSS样式能够更好地应用于特定位置的元素。