您的位置:首页 > Web前端 > CSS

css3选择器

2017-09-13 22:10 253 查看
属性选择器:

div[data-info]  选择有这个属性的

Div[data-info="1"] 完全匹配

div[data-info ^= "h"] 匹配开头

div[data-info $= "h"]匹配结尾

div[data-info ~= "h"]匹配空格

div[data-info |= "h"]匹配短横、开头

div[data-info *= "h"]匹配任意

Css3选择器:

Div:first-child{}第一个儿子

Div:last-child{}最后一个儿子

Div:nth-child(n) 选择din儿子

Div:nth-child(2n+3)从第三个开始每两个选一个

Div:nth-last-child(2n+3) 倒数

//类型

Div:first-of-type{} 第一个div类型的

Div:last-of-type{} 最后一个div类型的

Div:nth-of-type(n)第3个div类型的

DIV:nth-of-type(2n+3)选出div类型的从第三个开始,每两个选一个

Div:nth-last-of-type(2n+3)倒数

//关系

Div>p 所有的后代p

Div+p 下一个亲P

Div~p 后面的所有p

//伪类

:hover

:focus 得到焦点

:enabled 有效的

:disabled 无效的

:empty 空标签

//伪元素

::before 

::after 

//一定要有content;他们是行内的元素;他们是子集元素

::selection 反选的内容

::first-line 首行

::first-letter 首字
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: