简述CSS选择符有哪些?
CSS选择符(或称选择器)是用来选中页面中特定元素并应用样式的工具。以下是主要的CSS选择器:
- 元素选择器:这是最基础的选择器,它根据HTML元素的类型进行选择。例如,
h1 { color: blue; }
会将所有的h1元素的文字颜色设置为蓝色。 -
ID选择器:通过元素的id属性进行选择,id选择器在CSS中具有很高的优先级。例如,
#myId { color: blue; }
会将id为myId的元素的文字颜色设置为蓝色。 -
类选择器:通过元素的class属性进行选择。例如,
.myClass { color: blue; }
会将class为myClass的所有元素的文字颜色设置为蓝色。 -
属性选择器:通过元素的属性进行选择。例如,
[href] { color: blue; }
会将所有含有href属性的元素的文字颜色设置为蓝色。 -
后代选择器:选中某元素的后代元素。例如,
div p { color: blue; }
会将所有在div元素内部的p元素的文字颜色设置为蓝色。 -
子元素选择器:选中某元素的直接子元素。例如,
div > p { color: blue; }
会将所有直接在div元素下一级的p元素的文字颜色设置为蓝色。 -
相邻兄弟选择器:选中某元素的下一个兄弟元素。例如,
h1 + p { color: blue; }
会将所有紧跟在h1元素后面的p元素的文字颜色设置为蓝色。 -
通用选择器:选中所有元素。例如,
* { color: blue; }
会将所有元素的文字颜色设置为蓝色。
此外,CSS3还引入了一些新的选择器,如:
- 结构伪类选择器:例如
:first-child
、:last-child
、:nth-child()
等,用来选择特定位置的元素。 - 否定伪类选择器:例如
:not()
,用来选择除某些元素以外的元素。 - 伪元素选择器:例如
::before
、::after
,用来选择元素的一部分,或者在元素前后插入内容。
以上只是一部分选择器,CSS中还有许多其他的选择器等待你去发现和使用。