CSS选择器汇总

发表于 | 分类于 | 阅读

CSS选择器是学习CSS以及Web编程的基础。但是总有不少人会对一些选择器的概念似懂非懂，用的不熟。

好消息是这篇文章整理了你可能会用到的几乎所有CSS选择器。

废话不多说，直接上干货。

基本选择器

1
2
3
4
* /*通用选择器，匹配页面所有元素*/
#id /*ID选择器，匹配id是'id'的元素*/
.class /*class（类）选择器，匹配所有类名中包含'class'的元素*/
E  /*标签（类型）选择器，匹配给定元素名的元素*/

组合选择器

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

属性选择器

1
2
3
4
5
6
7
E[attr]    /*匹配所有具有属性attr的E元素，div[id]就能取到所有有id属性的div*/
E[attr = value]    /*匹配属性attr值等于value的E元素，div[id='test'],匹配id为test的div*/
E[attr ~= value]    /*匹配所有属性attr具有多个空格分隔、其中一个值等于value的E元素*/
E[attr ^= value]    /*匹配属性attr的值以value开头的E元素*/
E[attr $= value]    /*匹配属性attr的值以value结尾的E元素*/
E[attr *= value]    /*匹配属性attr的值包含value的E元素*/
E[attr operator value i]   /*匹配符合操作value值的E元素（包括以上每一种操作），i是忽略value值的大小写*/

E[attr ~= value]和E[attr *= value]的区别

以下面代码为例

1
<p class="first active">段落</p>

p[class~="first"]和p[class~="active"]可以选中上面的P元素，也只有这两种~=方法能选中，因为这是以识别空格来判定value值的，以空格分开的就是单个完整的value值，value值不能包含空格；
p[class*="fir"]和p[class*="first "]和p[class*="first a"]和p[class*="first active"]都可以选中P元素，*=是以字符串识别属性值，所以任何一种按顺序打断属性值的value都可以匹配该元素。
总结一句话就是，可以认为E[attr *= value]是E[attr ~= value]的超集。

伪类选择器

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

  • 结构化相关

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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*/

  • 状态相关

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    E:link   /* 匹配所有未被访问过的链接（不是指未被点击，其有可能是之前被访问过但没有被点击过）*/
    E:visited    /*匹配所有已被访问过的链接*/
    E:hover    /*匹配鼠标悬停其上的E元素*/
    E:active    /*匹配鼠标已经其上按下、还没松开的E元素*/
    E:focus    /*匹配获得当前焦点的E元素*/
    E:blur    /*匹配失去当前焦点的E元素*/
    a:link, a:hover, a:active, a:visited 的顺序
    顺序依次是a:link >> a:visited >> a:hover >> a:active

  • 表单相关

    1
    2
    3
    E:enabled    /*匹配表单中可启用的E元素，一个元素能被激活（如选择、点击或接受文本输入）或获取焦点，则是启用的*/
    E:disabled    /*匹配表单中禁用的E元素，在被禁用时，元素不能被激活或获取焦点*/
    E:checked    /*匹配表单中被选中的radio或checkbox元素*/

  • 其他

    1
    2
    3
    E::selection   /* 该伪元素作用于E元素下文档被选中时的样式*/
    E:lang(c)   /* 匹配lang属性等于c的E元素*/
    E:not(selector)    /*匹配E的父元素下不匹配selector选择器的E元素*/

伪元素选择器

以下四个伪元素选择器也可以用单冒号，效果一样

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

hover选择器

1
2
3
4
5
6
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的状态*/
E:hover::before     /*E元素是悬浮元素，E的hover可以改变其before伪元素的状态**/
E:hover::after     /*E元素是悬浮元素，E的hover可以改变其after伪元素的状态**/

nth-child选择器

CSS选择器中n表示非负整数（0,1,2,3,4…）

1
2
3
4
5
6
7
8
9
10
11
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(2n+1)  /*匹配E的父元素下所有子元素次序是奇数的E元素（比如第1,3,5,7..个）*/
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个）*/
E:nth-child(even)  /*等于E:nth-child(2n) */
E:nth-child(odd)  /*等于E:nth-child(2n+1) */

nth-last-child选择器同上

0%