CSS选择器大汇总

CSS选择器是学习CSS以及Web编程的基础。

整理出常用的CSS选择器，供自己和大家一起学习。

基本选择器

* /*通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）*/
#id /*id选择器，匹配id是'id'的元素*/
.class /*类选择器，匹配所有类名中包含'class'的元素*/
E  /*标签选择器*/

组合选择器

E,F   /* 多元素选择器，用,(半角)分隔，同时匹配元素E和元素F*/
E F    /*后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F*/
E>F    /*子元素选择器，用>分隔，匹配E元素的所有直接子元素*/
E+F    /*直接相邻选择器，匹配E元素之后的相邻的一个同级元素F（只匹配一个）*/
E~F    /*普通相邻选择器（兄弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）*/
.class1.class2    /*匹配类名既包括'class1'又包括'class2'的元素*/
element#id   /* 匹配id为'id'的element标签的元素*/

属性选择器

E[attr]    /*匹配所有具有属性attr的元素，div[id]就能取到所有有id属*/性的div
E[attr = value]    /*匹配属性attr值等于value的元素，div[id='test'],匹配id为test的div*/
E[attr ~= value]    /*匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素*/
E[attr ^= value]    /*匹配属性attr的值以value开头的元素*/
E[attr $= value]    /*匹配属性attr的值以value结尾的元素*/
E[attr *= value]    /*匹配属性attr的值包含value的元素*/

伪类选择器

伪类中像 E:something 这种形式，可以这样理解，首先选择器是E元素，这是大前提，然后something是限定范围的。

这样理解就可以减少不必要的误解。

• 结构化相关

E:first-child    /*匹配E的父元素的第一个子元素且必须为E元素*/
E:last-child    /*匹配E的父元素的最后一个子元素且必须为E元素*/
E:nth-child(3)    /*匹配E的父元素的第3（值可以取正整数）个子元素且必须为E元素*/
E:nth-last-child(2)    /*匹配E的父元素的倒数第2个子元素且必须为E元素*/
E:only-child    /*匹配没有兄弟元素的E元素，即父元素下只有其一个子元素*/
E:nth-of-type(2)    /*匹配E的父元素的第2（值可以取正整数）个和E同类型的子元素*/
E:nth-last-of-type(3)    /*匹配E的父元素的倒数第3个和E同类型的子元素*/
E:first-of-type    /*匹配E的父元素的第1个和E同类型的子元素，等同于E:nth-of-type(1)*/
E:last-of-type    /*匹配E的父元素的最后1个和E同类型的子元素，等同于:nth-last-of-type(1)*/
E:only-of-type    /*匹配其父元素下唯一一个E同种类型的子元素*/
E:empty    /*匹配一个不包含任何子元素的元素，文本节点也被看作子元素*/
html:root    /*匹配文档的根元素，对于HTML文档，就是HTML元素，也可以写成:root*/

• 状态相关

E:link   /* 匹配所有未被访问过的链接（不是点击，有可能链接没被点击过却被访问过）*/
E:visited    /*匹配所有已被访问过的链接*/
E:active    /*匹配鼠标已经其上按下、还没松开的E元素*/
E:hover    /*匹配鼠标悬停其上的E元素*/
E:focus    /*匹配获得当前焦点的E元素*/

• 表单相关

E:enabled    /*匹配表单中可用的元素*/
E:disabled    /*匹配表单中禁用的元素*/
E:checked    /*匹配表单中被选中的radio或checkbox元素*/
E::selection   /* 匹配用户当前选中的元素*/

• 其他

E:lang(c)   /* 匹配lang属性等于c的E元素*/
E:not(selector)    /*匹配E的父元素下不匹配selector选择器的E元素*/

伪元素选择器

以下四个也可以用单冒号，效果一样

E::first-line    /*匹配E元素内容的第一行*/
E::first-letter    /*匹配E元素内容的第一个字母*/
E::before    /*在E元素之前插入生成的内容*/
E::after    /*在E元素之后插入生成的内容*/

hover选择器

E:hover F    /*E元素是悬浮元素，F是E的子元素，E的hover可以改变F的状态*/
E:hover>F    /*E元素是悬浮元素，F是E的直接子元素，E的hover可以改变F的状态*/
E:hover+F    /*E元素是悬浮元素，F是E的直接相邻的一个同级元素，E的hover可以改变F的状态*/
E:hover~F    /*E元素是悬浮元素，F是E的同级元素（兄弟元素），E的hover可以改变F的状态*/

nth-child选择器

CSS选择器中n表示非负整数

E:nth-child(1)  /*匹配E的父元素下第一个子元素且为E元素*/
E:nth-child(n)  /*所有E元素（和E标签选择器貌似没什么区别。。）*/
E:nth-child(2n)  /*匹配E的父元素下所有子元素次序是偶数的E元素（比如第2,4,6,8...个）*/
E:nth-child(even)  /*等于E:nth-child(2n) */
E:nth-child(2n+1)  /*匹配E的父元素下所有子元素次序是奇数的E元素（比如第1,3,5,7..个）*/
E:nth-child(odd)  /*等于E:nth-child(2n+1) */
E:nth-child(n+4)  /*匹配E的父元素下所有子元素次序大于等于4的E元素（比如第4,5,6,7...个）*/
E:nth-child(-n+5)  /*匹配E的父元素下所有子元素次序小于等于5的E元素（比如第1,2,3,4,5个）*/
E:nth-child(3n+2)  /*匹配E的父元素下所有子元素次序符合3n+2的E元素（比如第2,5,8,11个）*/

nth-last-child选择器也是同理

a:link, a:hover, a:active, a:visited 的顺序

顺序依次是a:link>>a:visited>>a:hover>>a:active

本文首发在个人博客yoowin.me，欢迎访问。