开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言

当我们在浏览页面的时候，鼠标滑过某个元素，该元素样式会发生一个变化，给人一种非常炫酷的感觉，这个就能通过伪类选择器去实现。在日常开发中熟练运用伪类选择器能提高我们的开发效率。

定义

伪类选择器能够为元素添加一些效果，让元素更加丰富，最常见的是a标签的伪类，我们在网页点开超链接，会发现超链接的颜色会变化这就是伪类的作用。

超链接的伪类

:link——设置未访问的样式。
:visited——设置访问过的样式。
:hover——设置鼠标滑过的样式。
:acitve——设置点击时的样式。

    a:link {
        color: red;
      }
      a:visited {
        color: white;
      }
      a:hover {
        color: greenyellow;
      }
      a:active {
        color: aqua;
      }

如果还可以给a标签添加类名，然后用相关伪类。如：a.item:link(class为item的a标签为访问的样式)

操作元素类伪类

了解了超链接常用的几个伪类选择器，接下来我们看常见的操作元素的伪类。假设一个场景，一个ul列表，我们想要第一个li子元素color变红，不需要单独设置类名，完全可以用伪类。

:nth-child(n)

用来设置子元素的第n个元素元素。

     .ul li:nth-child(1) {
        color: red;
      }

    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>

nth-last-child(n)

用来设置倒数第n个子元素的样式，这个相当于nth-child(n)倒叙。

:first-child

用来设置第一个子元素的样式，所以上面把第一个li变红还可以这么写：

   .ul li:first-child {
        color: red;
      }

last-chikd

用来设置最后一个子元素的样式。

:before

上面几种伪类选择器主要是对样式进行操作，而:before被称为伪元素，跟设置样式不同，伪类元素可以插入一些新内容，而:before就是在元素前面插入新内容。比如我们想在一个元素前面添加一个小的倒三角，就可以通过伪元素来实现。

    .item:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 10px;
        border-top: 10px solid red;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
      }

transparent是设置透明，必须要设置透明，不然不会出现。

:after

同理，:after是往元素后面插入新内容。用法跟:before是一样的。

总结

以上就是全部内容，当然，本文只是介绍了常见的伪类选择器跟伪元素，还有一些伪类选择器等着大家去发掘。开发过程中一些功能用CSS完成的话，会比js快多了。文中提到实现一个倒三角的，在面试中也有可能被问到。

CSS详解——伪类

前言

定义