模式含义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个子元素,第一个编号为13
E:nth-last-child(n)匹配其父元素的倒数第n个子元素,第一个编号为13
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.warningan 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 FE元素下的所有F元素1
E > FE元素下的F子元素2
E + F匹配所有紧随E元素之后的同级元素F2
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) /* 一样 */
喜欢这篇文章吗,不妨分享给朋友们吧!