CSS3引入了许多新的选择器,用于更加灵活地选择HTML元素,并对其应用样式。以下是一些常用的CSS3选择器:
1.属性选择器(Attribute Selectors):用于根据元素的属性值选择元素。例如:
[attribute]:选择具有指定属性的元素。
[attribute=value]:选择具有指定属性值的元素。
[attribute^=value]:选择属性值以指定值开头的元素。
[attribute$=value]:选择属性值以指定值结尾的元素。
[attribute*=value]:选择属性值中包含指定值的元素。
2.伪类选择器(Pseudo-class Selectors):用于根据元素的状态或位置选择元素。例如:
:hover:选择鼠标悬停在元素上的元素。
:active:选择被激活的元素(例如,鼠标按下时)。
:checked:选择被选中的复选框或单选框元素。
:nth-child(n):选择在其父元素中是第n个子元素的元素。
:first-child:选择其父元素的第一个子元素。
:last-child:选择其父元素的最后一个子元素。
3.伪元素选择器(Pseudo-element Selectors):用于在元素的内容之前或之后创建虚拟的元素,并对其应用样式。例如:
::before:在元素的内容之前创建一个虚拟元素。
::after:在元素的内容之后创建一个虚拟元素。
4.目标选择器(:target):用于选择当前活动的目标元素,通常在使用锚链接(#)时使用。
5.邻接选择器(Adjacent Sibling Selector):用于选择紧接在另一个元素之后的元素。例如:
+:选择紧接在指定元素后的第一个同级元素。
这只是CSS3中引入的一部分选择器,还有其他一些高级的选择器,如多列选择器、UI状态伪类选择器等。通过合理使用这些选择器,可以更加灵活地选择和样式化HTML元素。