码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 选择器用法小结

时间:2018-07-07 17:38:57      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:ble   tar   表单元素   没有   disable   css3   用法   ...   highlight   

表单选择器:

/*:enabled 可用的 :disabled 被禁用的 :focus 获取了焦点的 
多用在表单元素上*/
input:enabled {...}
input:disabled {...}
input:focus {...}

属性选择器:

/*[attribute] [attribute=value] 选择具有对应属性的元素
即使此属性没有实际作用*/
a[target] {...}
a[target=_blank] {...}

次序选择器:

:first-child 选取属于其父元素的首个子元素
:last-child 选取属于其父元素的最后一个子元素
:nth-child(n) 选取父元素的第n个子元素
:nth-last-child(n) 倒序选取父元素的第n个子元素

/*计算次序时不考虑类型,但如果符合次序的元素跟选择器的类型不匹配,则不会被选取*/
ul li:first-child {...}
p:nth-child(odd) {...}
p:nth-child(even) {...}
p:nth-last-child(2) {...}

:first-of-type 父元素的特定类型的首个子元素的每个元素
:last-of-type 父元素的特定类型的首个子元素的每个元素
:nth-of-type(n) 父元素的特定类型的第n个子元素
:nth-last-of-type(n) 父元素的特定类型的第n个子元素的每个元素,从最后一个子元素开始计数

/*只对类型匹配的元素进行次序计算*/
ul li:first-of-type {...}
p:last-of-type {...}
p:nth-of-type(2) {...}

 

CSS3 选择器用法小结

标签:ble   tar   表单元素   没有   disable   css3   用法   ...   highlight   

原文地址:https://www.cnblogs.com/yangshifu/p/9277396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!