HTML5基础之五(CSS3选择器索引参考)

详细的css3选择器和属性都可以在MDN上面查到,列举如下:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

火狐扩展:https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

谷歌/Safari扩展:https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions

其它非标准的扩展:http://peter.sh/experiments/vendor-prefixed-css-property-overview/

这里我列举一些不常用的或者容易遗漏的选择器或属性

选择器

[attr]:包含该属性

[attr=”val”]:attr为val的元素

[attr^=”val”]:attr以val打头的元素(CSS3)

[attr$=”val”]:attr以val结尾的元素(CSS3)

[attr*=”val”]:attr包含val的元素(CSS3)

[attr~=”val”]:attr有一个或多个值,其中一个是val

[attr|=”val”]:attr以-分割,其中第一个是val(注意是第一个)

 

选择器的组合

<selector>, <selector>:表示并列的选择器,公用一套css

<selector> <selector>:所有的子孙节点

<selector> > <selector>:直属的儿子节点

<selector> + <selector>:紧邻的节点(类型匹配一个selector)

<selector> ~ <selector>:下一个节点不一定紧邻(CSS3)

 

伪元素

::first-line:选择第一行

::first-letter:选择第一个字符

:before,:after:在选择元素的前,后添加内容

:root:根元素(html)(CSS3)

:first-child:第一个子元素

:last-child:最后一个子元素(CSS3)

:only-child:选择的元素是父级仅有的一个子元素(CSS3)

:only-of-type:选择只有一个该类型的(CSS3)

:nth-child(n):选择第几个子元素(CSS3)

:nth-last-child(n):选择倒数第几个元素(CSS3)

:nth-of-type(n):指定类型的第几个元素(CSS3)

:nth-last-of-type(n):指定类型的倒数第几个(CSS3)

 

与状态和验证有关的

:enabled :disabled :checked :default :valid :invalid :in-range :out-of-range :required(必填) :optional(非必填)

(上面均为CSS3)

:link :visited :hover :active :focus

:not(选择器)(不包括 CSS3) :empty(不包含子元素 CSS3)

css3
作者:张雪飞
出处:https://zhangxuefei.site/p/1214
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注