CSS高级选择器都有哪些?

5 min read

CSS的高级选择器有以下几种:

  1. 后代选择器:使用空格分隔的两个或多个选择器,用于选择子元素,例如div p选择所有<p>标签,且它们是<div>标签的后代元素。

  2. 子选择器:使用>分隔的两个选择器,用于选择直接子元素,例如ul>li选择所有直接子元素为<ul>标签的子元素<li>

  3. 通用兄弟选择器:使用~分隔的两个选择器,用于选择与第一个选择器具有相同父元素且紧随其后的所有元素,例如h1~p选择所有跟在<h1>标签后的<p>标签。

  4. 伪类选择器:使用:加上状态或特性名字的方式,用于选择特定状态的元素,例如:hover选择鼠标悬停在元素上时的状态。

  5. 属性选择器:使用中括号[]来选择具有特定属性的元素,例如[title]选择所有具有title属性的元素。

  6. 相邻兄弟选择器:使用+分隔的两个选择器,选择与第一个元素之后的兄弟元素,例如h1+p选择紧跟在<h1>标签后的<p>标签。

  7. 伪元素选择器:使用两个冒号::加上相应的元素名字的方式,用于向某些元素添加特定效果,例如::before向元素之前添加内容。

这些高级选择器可以用单独或组合的方式进行使用,以实现更精确的元素选择。