基本选择器
- id选择器
#
- 类选择器
.
- 后代选择器
空格
- 元素选择器
标签名
- 分组选择器
,(结合符)
- 通配符选择器
*
基本选择器扩展
- 子元素选择器
>
– 只匹配到直接后代,不能匹配到深层的后代元素 - 相邻兄弟选择器
+
– 只匹配紧跟着的兄弟元素 - 通用兄弟选择器
~
– 匹配所有的兄弟元素 - 分组选择器
,(结合符)
–h1,h2,h3{}
属性选择器
[attr]
– 选择包含attr 属性的所有元素,不论attr的取值为何[attr=val]
– 仅选择attr属性被赋值为val的所有元素[attr~=val]
– 表示带有以attr命令属性的元素, 并且该属性是一个以空格作为分隔的值
– 例如[name~="csdn"]
匹配name="csdn"
或name="csdn blog"
但不匹配name="csdnblog"
[attr|=val]
– 选择attr
属性的值为val
或者以val-
开头的元素[attr^=]
– 选择attr
属性的值以val
开头(包括val
)的元素[attr$=val]
– 选择attr
属性的值以val
结尾(包括val
)的元素[attr*=val]
– 选择attr属性的值包含字符串val的元素
伪类和伪元素选择器
链接伪类
:link
– 表示作为超链接,并指向一个未访问的地址的所有锚:visited
– 表示作为超链接,指向一个已访问的地址的所有锚,并且只支持color、background-color、border-color
三种属性:target
– 代表一个特殊的元素,它的id
是URI的片段标识符
注意以上三种伪类只作用于链接元素
动态伪类
:hover
– 表示悬浮到元素上:active
– 表示匹配被用户激活的元素(点击按住时)
由于a标签的:link和:visited可以覆盖a标签所有的状态,应该让选择范围较大的选择器出现在前面,正确的顺序为:link、:visited、:hover、:active
表单伪类
:enabled
– 匹配可编辑的表单:disable
– 匹配被禁用的表单:checked
– 匹配被选中的表单:focus
– 匹配获焦的表单
结构性伪类
index 从 1开始计数
index 可以为 even odd
index 可以为变量n 代表0到正无穷
:nth-child(index)
– 如#wrap ele:nth-child(index)
匹配#wrap
中第index的子元素,且这个子元素必须是ele:first-child
:last-child
:nth-last-child(index)
:only-child
:nth-of-type(index)
– 如#wrap ele:nth-of-type(index)
匹配#wrap
中第index的ele
子元素:first-of-type
:last-of-type
:nth-last-type
:only-of-type
:not
– 匹配条件取反的元素:empty
– 匹配空元素,不允许有内容,空格也不行,可以有attr
伪元素
::after
– 选中元素后面的伪元素::before
– 选中元素前面的伪元素::firstLetter
– 选中文本的第一个字母::firstLine
– 选中文本的第一行::selection
– 匹配选中的文本