阅读量:0
CSS3选择属性
(图片来源网络,侵删)CSS3引入了许多新的选择器,这些选择器允许开发者更精确地定位和样式化HTML元素,以下是一些主要的CSS3选择器:
1. 基本选择器
选择器 | 描述 |
* | 选择所有元素 |
E | 选择所有类型为E的元素 |
#id | 选择ID为给定值的元素 |
.class | 选择类名为给定值的所有元素 |
e E | 选择所有E元素的后代元素e |
e > E | 选择所有作为E子元素的元素e |
e + E | 选择紧接在e元素后面的E元素 |
e ~ E | 选择e元素之后的所有E元素 |
2. 属性选择器
选择器 | 描述 | |
[attr] | 选择具有attr属性的元素 | |
[attr=value] | 选择attr属性值为value的元素 | |
[attr~=value] | 选择attr属性值包含一个以空格分隔的单词为value的所有元素 | |
[attr | =value] | 选择attr属性值等于value或以value开头的所有元素 |
[attr^=value] | 选择attr属性值以value开头的所有元素 | |
[attr$=value] | 选择attr属性值以value结尾的所有元素 | |
[attr*=value] | 选择attr属性值包含value的所有元素 |
3. 结构伪类选择器
选择器 | 描述 |
:firstchild | 选择每个父元素的第一个子元素 |
:lastchild | 选择每个父元素的最后一个子元素 |
:nthchild(an+b) | 选择每个父元素的第an+b个子元素 |
:onlychild | 选择每个是其父元素唯一子元素的元素 |
:onlyoftype | 选择每个是其父元素中同类型唯一元素的元素 |
:nthoftype(an+b) | 选择每个父元素的第an+b个同类型子元素 |
4. UI伪类选择器
选择器 | 描述 |
:root | 选择文档的根元素 |
:empty | 选择没有子元素(包括文本节点)的元素 |
:target | 选择当前活动锚点的元素 |
:enabled | 选择启用状态的元素 |
:disabled | 选择禁用状态的元素 |
:checked | 选择被选中的输入元素 |
:default | 选择默认选中的表单元素 |
:valid | 选择通过校验的表单元素 |
:invalid | 选择未通过校验的表单元素 |
5. 关系伪类选择器
选择器 | 描述 |
:required | 选择设置了必需属性的表单元素 |
:optional | 选择没有设置必需属性的表单元素 |
:inrange | 选择在指定范围内的表单元素 |
:outofrange | 选择在指定范围外的表单元素 |
:readonly | 选择设置为只读的表单元素 |
:readwrite | 选择没有设置为只读的表单元素 |
以上是CSS3中的一些主要选择器,它们提供了强大的能力来定位和样式化HTML元素。