CSS3学习笔记（1）——CSS选择器、属性选择器、伪类选择器

CSS(3)中提供的选择器有很多（如下表格），下表来自w3school，我这里引用一下（新手写作，若侵权必删），原网址如下：http://www.w3school.com.cn/cssref/css_selectors.asp

选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。1element elementdiv p选择 <div> 元素内部的所有 <p> 元素。1element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素。2element+elementdiv+p选择紧接在 <div> 元素之后的所有 <p> 元素。2[attribute][target]选择带有 target 属性所有元素。2[attribute=value][target=_blank]选择 target="_blank" 的所有元素。2[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素。2[attribute|=value][lang|=en]选择 lang 属性值以 "en" 开头的所有元素。2:linka:link选择所有未被访问的链接。1:visiteda:visited选择所有已被访问的链接。1:activea:active选择活动链接。1:hovera:hover选择鼠标指针位于其上的链接。1:focusinput:focus选择获得焦点的 input 元素。2:first-letterp:first-letter选择每个 <p> 元素的首字母。1:first-linep:first-line选择每个 <p> 元素的首行。1:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素。2:beforep:before在每个 <p> 元素的内容之前插入内容。2:afterp:after在每个 <p> 元素的内容之后插入内容。2:lang(language)p:lang(it)选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。2element1~element2p~ul选择前面有 <p> 元素的每个 <ul> 元素。3[attribute^=value]a[src^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。3[attribute$=value]a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。3[attribute*=value]a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。3:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。3:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。3:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。3:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。3:root:root选择文档的根元素。3:emptyp:empty选择没有子元素的每个 <p> 元素（包括文本节点）。3:target#news:target选择当前活动的 #news 元素。3:enabledinput:enabled选择每个启用的 <input> 元素。3:disabledinput:disabled选择每个禁用的 <input> 元素3:checkedinput:checked选择每个被选中的 <input> 元素。3:not(selector):not(p)选择非 <p> 元素的每个元素。3::selection::selection选择被用户选取的元素部分。3

当然了，对于我来说，要记住这么多东西的表格是很难受的，也很容易记混。下面我对一些应该比较重要的选择器分类记录一下。

类选择器：

.class

标签选择器：

element

id选择器：

#id

后代选择器：

element_1 element_2：选择 element_1 内部的全部 element_2 元素

子代选择器：

element_1>element_2：选择以 element_1 为父元素的全部 element_2 元素

群组选择器：

element_1,element_2：选择 element_1 和 element_2 ……

相邻选择器：

element_1+element_2：选择与 element_1 相邻的，并且元素类型为 element_2 的元素，相邻和E类型，两个条件都要满足，缺一不可

兄弟选择器：

element_1~element_2：选择element_1的兄弟元素，且元素类型为 element_2

属性选择器：

[attr]选择存在attr属性的元素，如果想要限制元素类型，则可以写成 E[attr]，下同[attr=val]选择属性值完全等于val的元素，引号可加可不加[attr*=val]选择属性值里包含val字符的元素[attr^=val]选择属性值里以val字符开头的元素[attr$=val]选择属性值里以val字符结尾的元素

伪类选择器：

（1）超链接伪类选择器：

a:link定义a元素未访问时的样式a:visited定义a元素访问后的样式a:hover定义鼠标经过a元素时的样式a:active定义鼠标点击激活时的样式

注意：

1. 在定义这四个伪类的时候，要按照 link、visited、hover、active 的顺序进行，即“爱恨原则”——“LoVe HAte”。

2. hover 伪类并不限用于 a 元素，它可以定义任何一个元素在鼠标经过时的样式。

 

（2）相对于父元素的结构伪类：

E:first-child查找E这个元素的父元素的第一个子元素E，如果第一个子元素不是E类型，则查找无效E:last-child查找E这个元素的父元素的最后一个子元素E，如果最后一个子元素不是E类型，则查找无效E:nth-child(n)

查找E这个元素的父元素的第n个子元素E（注意索引是从1开始的，第一个的索引就是1，不要下意识以为第一个的索引是0），如果第n个子元素不是E类型，则查找无效；

n也可以是关键字或表达式，见下

E:nth-last-child(n)同E:nth-child(n) 相似，只是倒着计算E:nth-child(even)此处n就是取关键字even，表示偶数项的元素E:nth-child(odd)此处n就是取关键字odd，表示奇数项的元素E:empty选中没有任何子节点的E元素，注意，空格也算子元素E:target结合锚点进行使用，处于当前锚点的元素会被选中

上面的选择器我们可以发现到一个很大的缺点，就是在查找的过程中并没有将元素类型限制成我们想要查找的E类型。因此，一旦查找到的元素不是E类型的元素，则查找无效，这在变化多端的动态数据中是极其容易出现的。因此，CSS3又提供了更为实用的选择器：

E:first-of-type查找E元素的父元素的第一个E类型的元素，查找的时候只会查找满足E类型的元素，过滤掉其它类型的元素E:last-of-type查找E元素的父元素的最后一个E类型的元素，查找的时候只会查找满足E类型的元素，过滤掉其它类型的元素E:nth-of-type(n)查找E元素的父元素的第n个E类型的元素，查找的时候只会查找满足E类型的元素，过滤掉其它类型的元素

需要重点说明的是关于 nth-child(n) 和 nth-of-type(n) 中的n，它遵循线性变化，取值范围为0~查找元素的长度。但是当 n≤0 时，选取是无效的。如当 n 是一个表达式，nth-of-type(-n+5) 表示查找 nth-of-type(5)、nth-of-type(4)、nth-of-type(3)、nth-of-type(2)、nth-of-type(1)，即查找前五个子元素 。

 

（3）伪元素选择器

E::before定义在一个元素之前插入 content 属性定义的内容和样式E::after定义在一个元素之前插入 content 属性定义的内容和样式E::first-letter文本的第一个字母或字(不是词组)E::first-line

文本第一行；

如果设置了::first-letter，那么无法同时设置::first-line的样式

E::selection

可改变选中文本的样式；

它只能设置显示的样式，而不能设置内容大小

E::before、E::after：分别定义在一个元素之前和之后插入 content 属性定义的内容和样式。注意：

1. 是一个行内元素，需要通过以下三种方法转换成块元素：float、display:block、position（常用）；

2. 必须添加 content:""，就算不设置内容；

3. 在CSS2中是伪类——E:before、E:after，在CSS3中是伪元素——E::before、E::after。在新版本下，E:after、E:before会被自动识别为E::after、E::before。但有时为了兼容处理，还是会写成E:after、E:before。