css伪类选择器应该怎样用（上）

什么是伪类选择器

什么是伪类，既然是伪，那就是假的或者不存在的，也只有再特定状态下才会有作用。

即：同一个标签根据其不同状态会显示不同的样式的就是伪类。

伪类选择器分为两种，静态伪类和动态伪类，就是触发和非触发。

当然也有其他分法：

• 动态伪类（link/visited等）
• 目标伪类（:target）
• 语言伪类（:lang）
• UI状态伪类（disabled/checked/enabled）
• 结构化伪类（nth等）
• 对立面伪类（not。。）

不管怎么分，关键还是要灵活运用，怎么好记，怎么记

CSS1版本的时候，几乎都是:hover的天下

在CSS2版本的时候，增加了:focus这个常用的

CSS3版本就增加了:nth-child，:not等，本篇会介绍一些常用的伪类选择器，a链接相关link,visited,hover可参照上一篇，如有遗漏，也可留言交流。

一、:before 和 :after

before是在指定选择器之前插入内容和样式

after则为指定选择器之后插入内容和样式

当然after除了上述用法之外，还有一个清除浮动的用法，也是许多公司面试题之一，其原理类似于clear:both方法只是不用加div了。

.content:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }

二、:target

:target选择器可用于当前活动的target元素的样式。

点击2的时候对应html2,对应链接也是/1.html#html2，所以背景会变成红色。如果这时将id写一样生效的只会是第一个id。

 <a href="#html1">点击1</p>
 <a href="#html2">点击2</p>
 <p id="html1">头条</p>
 <p id="html2">头条</p>
 <style>
 :target{
 background-color:red;
 }
 </style>

三、:focus

用于选择具有焦点的元素，通常和input一起用，监听键盘鼠标从而改变样式。

此时我的鼠标点进input中，所以背景变为红色。

<input type="text" >
 <style>
 input:focus{
 background-color:red;
 }
 </style>

四、:first-child和 :last-child

:first-child选择器匹配父元素中第一个子元素。如果不是指定的子元素，则匹配失败。

:last-child选择器匹配父元素中最后一个子元素。如果不是指定的子元素，则匹配失败。

当然上图可能有误区，上图生效的原因是由于a在标签p中即是第一个也是最后一个，所以才会生效，主要是位置，下两张图会解释为什么存在的误区。

五、:first-of-type 和 :last-of-type

(1)、:first-of-type

:first-of-type 匹配相同父元素的第一个指定类型的子元素，简单理解就是选择指定元素的第一个兄弟元素。等同于 :nth-of-type(1)。

li:first-of-type{
 background-color:red;
}

上面的代码，选择所有列表（无序列表和有序列表）中第一个列表项。

(2)、:last-of-type

:last-of-type 匹配相同父元素的最后一个指定类型的子元素，简单理解就是选择指定元素的最后一个兄弟元素。等同于 :nth-last-of-type(1)。

 li:last-of-type{
 background-color:teal;
}

六、:nth-of-type(n) 和 :nth-last-of-type(n)

(1)、:nth-of-type(n)

:nth-of-type(n) 匹配相同父元素的第 N 个指定类型的子元素，也可以理解为选择指定元素的第 N 个兄弟元素。

 p:nth-of-type(2){
 background-color:red;
 }

上面的代码，选择所有同级 p 元素的第 2 个兄弟元素，即相同父元素下第 2 个 p 元素。

(2)、:nth-last-of-type(n)

:nth-last-of-type(n) 匹配相同父元素的倒数第 N 个指定类型的子元素，也可以理解为选择指定元素的倒数第 N 个兄弟元素。

p:nth-last-of-type(3){
 background:teal;
}

七、:nth-child(n) 和 :nth-last-child(n)

(1)、:nth-child(n)

:nth-child(n) 匹配父元素中的第 N 个子元素，不论元素的类型。如果第 N 个不是指定的子元素，则匹配失败。

li:nth-child(2){
 background-color:red;
 }

上面的代码，选择所有列表的第 2 个列表项。

(2)、:nth-last-child(n)

:nth-last-child(n) 匹配父元素中的倒数第 N 个子元素，不论元素的类型。如果倒数第 N 个不是指定的子元素，则匹配失败。

 li:nth-last-child(2){
 background-color:teal;
 }