【前端入门必知必会】css 伪类和伪元素选择器

这一篇咱们来介绍一类稍微特殊的两种选择器–伪类选择器和伪元素选择器。在页面中，这两类选择器一般用于标记一些特殊的样式，这些样式是基础选择器和组合选择器解决不了的，有些甚至是 JS 也作不到的。下面咱们就分别介绍一下这两种特殊的选择器。

伪类选择器

在页面中，有时候同一个元素在不一样动做下有不一样的样式。好比连接在没有点击的时候有个样式，在鼠标放上去有另外的样式，还有在点击完成之后又会又一个样式。这几种状况下这个连接的标签并无变化，有变化的只是它的状态，这时候就能够里用伪类来实现这个需求。在浏览器中，伪类的出现是为了向某些选择器添加特殊的效果或限制。伪类是在正常的选择器后面加上伪类名称，中间用冒号(:)隔开。好比咱们但愿一个超连接在鼠标放上去的时候有一个下划线：

a:{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}复制代码

这样设置一个 a 标签样式后，就是鼠标放上去会出现下划线，移走后下划线又会消失。

伪类主要有两方面的用处，一方面是标记一些特殊的状态，也就是一开始说的那个例子那种；另外还有一类伪类是有筛选的功能。下面来列举一下这两种伪类里经常使用的选择器的功能。

1、标记状态的伪类：

能够标记元素状态的伪类有以下几种：

• :link，选取未访问过的超连接元素。若是咱们注意过搜索引擎的结果的话，它里面的连接只要点过的就会变色，从而标记哪一个连接是访问过的。:link 这个属性就是用来标识没访问过的连接。
• :visited，选取访问过的超连接元素。和第一条相反，:visited 是用来标记哪一个连接是已经访问过的，防止重复点击。
• :hover，选取鼠标悬停的元素。，这个伪类常常用在 PC 端，当鼠标放在一个元素上时，能够用 :hover 来控制鼠标悬停的样式。由于在移动端里没有鼠标的概念，因此移动端里不多用这个伪类。
• :active，选取点中的元素。这个伪类的做用在刚才提到过了，当咱们但愿按钮有操做反馈的时候，能够用它来标记操做反馈的样式。固然这个伪类也是能够通用的，并非只能用在按钮上。
• :focus，选取得到焦点的元素。这个伪类用来标识得到焦点的元素，好比搜索框在聚焦的时候有个比较明显的边框，方便用户知道当前在可输入的状态。

2、筛选功能的伪类：

有些伪类也能够有筛选的功能，能够根据元素的特色或者索引来给特定的元素加上样式。经常使用的有筛选功能的伪类以下：

• :empty，选取没有子元素的元素。好比选择空的 span，就能够用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空，不会被这个伪类选中。
• :checked，选取勾选状态的 input 元素， 只对 radio 和 checkbox 生效。
• :disabled，选取禁用的表单元素。
• :first-child，选取当前选择器下第一个元素。
• :last-child，和 first-child 相反，选取当前选择器下最后一个元素。
• :nth-child(an+b)，选取指定位置的元素。这个伪类是有参数的，参数能够支持 an+b 的形式，这里 a 和 b 都是可变的，n 从0起。使用这个伪类能够作到选择第几个，或者选择序号符合 an+b 的全部元素。好比使用 li:nth-child(2n+1)，就能够选中 li 元素中序号是2的整数倍加1的全部元素，也就是第一、三、五、七、九、2n+1个 li 元素。
• :nth-last-child(an+b)，这个伪类和 nth-child 类似，只不过在计数的时候，这个伪类是从后往前计数。
• :only-child，选取惟一子元素。若是一个元素的父元素只有它一个子元素，这个伪类就会生效。若是一个元素还有兄弟元素，这个伪类就不会对它生效。
• :only-of-type，选取惟一的某个类型的元素。若是一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类容许父元素里有其余元素，只要不和本身同样就能够。

伪元素选择器

伪元素选择器是用于向某些元素设置特殊效果。伪元素选择器选中的并非真实的 DOM 元素，因此叫伪元素选择器。伪元素选择器经常使用的也就下面 5 个：

• ::first-line，为某个元素的第一行文字使用样式。
• ::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
• ::before，在某个元素以前插入一些内容。
• ::after，在某个元素以后插入一些内容。
• ::selection，对光标选中的元素添加样式。

Tips： 1. 伪元素选择器构造的元素是虚拟的，因此不能用 JS 去操做它。 2. 若是同时使用了 before 和 first-letter 两个伪类，第一个字是要从 before 里的内容开始算起的，若是 before里面的内容是一个非文本元素，那 first-letter 也会做用在这个非文本元素上，可是不必定能生效。 3. first-line 和 first-letter 不适用于内联元素，在内联元素中这两个选择器都会失效。 4. 在 CSS3 中，规定了伪类用一个冒号（:）表示，伪元素用两个冒号表示（::）。但除了 selection，其他四个伪元素选择器已经在 CSS2 中存在且和伪类用的是同样的单冒号表示的。为了向下兼容，如今的浏览器中伪元素选择器用单冒号和双冒号均可以。在没有兼容问题的状况下，仍是建议你们按着新的 CSS3 标准来开发。

总结

这一篇讲了伪类选择器和伪元素选择器，这两种选择器都是为了向元素添加特殊效果，但这些效果仅用于显示，不能被 js 操做。选择器这部分里列出来的也都是 CSS3 以前版本定义出来的经常使用选择器。