欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

[手冊]CSS选择器汇总

今天一时心血来潮,想汇总一下CSS的选择器,于是在W3C官网摘取了一些内容,详细的实例继续完善中。
模式 含义 CSS版本
* 匹配任何元素 2
E 匹配E元素 1
E[foo] 匹配包含'foo'属性的E元素 2
E[foo="bar"] 匹配包含'foo'属性并且其值完全等于'bar'的E元素 2
E[foo~="bar"] 匹配包含'foo'属性并且其中一个值是'bar'的E元素 2
E[foo^="bar"] 匹配包含'foo'属性并且值是以'bar'字符开头的E元素 3
E[foo$="bar"] 匹配包含'foo'属性并且值是以'bar'字符结束的E元素 3
E[foo*="bar"] 匹配包含'foo'属性并且值包含'bar'字符的E元素 3
E[foo|="en"] 匹配包含'foo'属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以'en'开头的E元素,主要用于lang属性,比如"en"、"en-us"、"en-gb"等等 2
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素 3
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1 3
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1 3
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 3
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素 3
E:first-child 匹配父元素的第一个子元素,等同于:nth-last-child(1) 2
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1) 3
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) 3
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) 3
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) 3
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) 3
E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 3
E:link 匹配所有未被点击的链接 1
E:visited 匹配所有已被点击的链接 1
E:active 匹配鼠标已经其上按下、还没有释放的E元素 1 和 2
E:hover 匹配鼠标悬停其上的E元素 1 和 2
E:focus 匹配获得当前焦点的E元素 1 和 2
E:target 匹配文档中特定"id"点击后的效果 3
E:lang(fr) 匹配lang属性等于'fr'的E元素 2
E:enabled 匹配表单中激活的元素 3
E:disabled 匹配表单中禁用的元素 3
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 3
E::first-line 匹配E元素的第一行 1
E::first-letter 匹配E元素的第一个字母 1
E::before 在E元素之前插入生成的内容 2
E::after 在E元素之后插入生成的内容 2
E.warning an E element whose class is "warning" (the document language specifies
how class is determined).
1
E#myid 匹配ID等于myid的E元素 1
E:not(s) 匹配不符合s选择器的E元素 3
E F E元素下的所有F元素 1
E > F E元素下的F子元素 2
E + F 匹配所有紧随E元素之后的同级元素F 2
E ~ F 匹配任何在E元素之后的同级F元素 3
nth-child、从父元素下的所有子元素中按序号选择:
tr:nth-child(2n+1) /* 匹配表格的基数行 */
tr:nth-child(odd) /* 一样 */
tr:nth-child(2n+0) /* 匹配表格的偶数行 */
tr:nth-child(even) /* 一样 */
:nth-child(10n-1) /* 匹配第9个,19个,29个等等元素 */
:nth-child(10n+9) /* 一样 */
foo:nth-child(0n+5) /* 匹配foo元素的父元素下的第5个元素 */
foo:nth-child(5) /* 一样*/
html|tr:nth-child(-n+6) /* 匹配表格的前6行 */
nth-last-child、从父元素下的所有子元素中按序号从最后开始选择:
tr:nth-last-child(-n+2) /* 匹配表格的最后两行 */
foo:nth-last-child(odd) /* 从最后一个开始匹配基数行 */
nth-of-type、从父元素下的指定的子元素中按序号选择:
img:nth-of-type(2n+1) /* 匹配基数行的图片元素 */
img:nth-of-type(odd) /* 一样 */
如果喜欢本文,请分享给朋友们