前言

伪类选择器在CSS中起到的作用可以说是至关重要的，如果CSS没有伪类选择器，有很多效果都要借助js来完成，这样不仅代码量增加，维护起来你难度也大。这样程序员的工作量大，也违背了CSS诞生的作用，就是提高开发效率，在同等的世间里完成更高质量的开发。

一篇文章让大家对CSS伪类有个全新的认识，相信有不少人应该有过一定的底子，虽然我写这篇文章是为了小白对CSS3伪类有个客观且全新的了解，不过对于入门的同学也用一定的作用，这篇文章有很多实用的用法可能在以前的学习中很少遇到以及见都没见过，对于这类同学们可以快速浏览看完，对于以前没遇到过得可以上手练练。对于大神级别的大佬，如果我这篇文章写得不好或者哪没写好写错的请给予建议。

虽然我这篇文章是零基础小白教程，可同学们也应该认真对待。看完要勤加练习，不然都会忘光的，所谓“温故而知新”，对于编程而言也同样适用。这里推荐个可以随时随地学编程的官网，旗下还有APP可以随时随地编程。w3schoolhttps://www.w3school

正文

伪类选择器包括伪类和伪类对象选择器，伪类选择器以冒号( : )作为前缀标识符。冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪类对象名，冒号前后没有空格，否则将认为类选择器，如图所示。

伪类选择器结构图解

下面表格包含了大部分伪类选择器：

伪类选择器
动态伪类
:link	链接没有被访问前的样式效果
:visited	链接被访问后的样式效果
:hover	鼠标悬停在元素上面时的样式效果
:active	点击元素时的样式效果，即按下鼠标左键时发生的样式
:focus	用于元素成为焦点时的样式效果，常用与表单元素
结构伪类
:first-child	选择某个元素下的第一个子元素
:last-child	选择某个元素下的最后一个子元素
:nth-child()	选择某个元素下的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从后往前数
:nth-of-type()	选择指定的元素
:nth-last-of-type()	选择指定的元素，从后往前数
:first-of-type	选择一个父级元素下的第一个同类型子元素
:last-of-type	选择一个父级元素下的第一个同类型子元素，从后往前数
:only-child	选择的元素是它父元素的唯一一个子元素
:only-of-type	选择一个元素是上级元素下唯一相同类型的子元素
:empty	选择的元素里面没有任何内容（空标签）
否定伪类
:not()	排查或者过滤掉特定元素
状态伪类
:enabled	选择匹配指定范围内所有可用UI(用户界面)元素
:disabled	选择匹配指定范围内所有不可用UI(用户界面)元素
:checked	选择匹配指定范围内所有可用UI(用户界面)元素
目标伪类
:target	选择匹配父元素的所有元素，且匹配元素被相关URL指向
-------------有很多伪类选择器存在于IE低版本兼容性问题，在练习中不建议使用IE预览

动态伪类

动态伪类是一类行为类样式，这些样式不存在于HTML中，只有当用户于页面进行交互才能体现出来。动态伪类伪类选择器包括两种形式：

锚点伪类，这是一种在链接中最常见的样式，如:link、:visited。

行为伪类，也成用户操作伪类，如:hover、:active、:focus。

为了教学简单，我写为内嵌式，在实际应用中不建议各位使用内嵌式。

:link

设置超链接在跳转前的样式，用法如下：

<a href="#" target="_blank">跳转</a>

想要设置上面超链接链接前的样式为字体颜色红色、无下滑线，可以这样设置。

<style>
    a:link {
        color: red;
        text-decoration: none;
    }
</style>

效果如图所示：

:visited

这伪类于:link刚好相反，:link是链接前的样式，而:visited是链接后的样式，也就是访问过后的超链接样式。

<a href="#" target="_blank">跳转</a>

设置它访问过后样式为有下划线，字体颜色为绿色，代码如下：

<style>
    a:visited {
        text-decoration: underline;
        color: green;
    }
<style>

效果如图所示：

:link伪类效果会被:visited伪类效果覆盖掉，网上的教程多如牛毛，什么清除浏览器数据什么书写格式，其实不然，是因为链接地址的书写问题，下面我来详细介绍下怎么解决这个问题。

在日常的学习中可能大家都是把链接前后一起书写的，方便快捷，还符合语义性；这就导致很多同学不知道这两个伪类有个覆盖效果的问题。下面的例子可以帮助你们有个大概的了解：

根目录图：

如果HTML.html这个页面要链接到login.html页面大多同学都是这样书写地址的：<a href="login.html">跳转</a>，由于同级的缘故；不过这样书写时要设置不同的:link/:visited效果就会出现:visited效果覆盖:link的效果。怎么解决呢？很简单书写上全地址就行了，可这有人就会问了你这不是全地址吗？也是，可是不全啊，网站目录的搭建大家可能很少了解根目录的概念，这里只要从根目录开始就可以了，根目录在网页书写的符号是 “ / ” ,只要是链接页面从根目录开始写就不会出现伪类覆盖的问题。这么说大家可能会有点蒙，那我就上图来演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a:link {
                color: red;
                text-decoration: none;
            }
            a:visited {
                color: green;
                text-decoration: underline;
            }
        </style>
    </head>
     <body>
        <a href="login.html" target="_blank">跳转</a>
     </body>
</html>

上面这段代码就是HTML页面链接到login页面的跳转链接，运行后效果图是这样的：

会发现:visited效果覆盖掉:link的效果，加上根目录就可以了：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a:link {
                color: red;
                text-decoration: none;
            }
            a:visited {
                color: green;
                text-decoration: underline;
            }
        </style>
    </head>
     <body>
        <a href="/login.html" target="_blank">跳转</a>
     </body>
</html>

就可以完美解决问题了，效果图如下：

:hover

:hover伪类选择器用于用户把鼠标移动到元素上面时的样式效果。不仅用于超链接还可以适用于很多元素上，比如说按钮，当你把鼠标移动到上面的时候，你会发现按钮的北背景色变深色了，或者改变颜色了，这就是通过:hover来完成的，当然还有其他方法进行设置，可毫无疑问:hover是最简单快捷的方法。这里我先介绍在超链接的使用技巧，在进行扩展使用它来更改鼠标移动到元素上面后的效果。

如果你想要在鼠标悬停在a标签元素上，让元素改变颜色，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a:hover {
                color: blue;
            }
        </style>
    </head>
    <body>
        <a href="#" target="_blank">跳转</a>
    </body>
</html>

鼠标移动到元素上的效果图：

扩展

结构代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 50px;
                line-height: 50px;
                color: red;
                background: orange;
                text-align: center;
            }
        </style>
    </head>
     <body>
        <div>:hover</div>
     </body>
</html>

效果图如下：

我想要的效果是，当鼠标移动到div元素上时，背景色改为黑色、字体改为白色，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 50px;
                line-height: 50px;
                color: red;
                background: orange;
                text-align: center;
                transition: all 1s;
            }
            
            div:hover {
                background: black;
                color: white;
            }
        </style>
    </head>
     <body>
        <div>:hover</div>
     </body>
</html>

这里我增加了transition属性是CSS3的过渡属性，目的是为了效果切换之间不那么生硬。由于这篇是介绍伪类选择器的这里就不展开介绍了，有兴趣的小伙伴们可以自行去查找教程。

鼠标悬停在div元素上效果图：

:active

:active用于用户单击元素时的样式效果。多用于表单控件，当用户点击时有个按下按钮的效果。同理这个我放在扩展区域。

当点击超链接我想要更改超链接字体的颜色，实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a {
                color: red;
            }
            
            a:active {
                color: blue;
            }
        </style>
    </head>
     <body>
            <a href="#" target="_blank">跳转</a>
     </body>
</html>

点击超链接效果图：

扩展

这个实例是用div模仿一个按钮，html自带的按钮样式一言难尽，模仿的好进行样式控制。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background: green;
                font-size: 24px;
                font-weight: bold;
                border-radius: 15px;
                margin: 150px auto;
                cursor: pointer;
            }

            div:active {
                background: orange;
                color: white;
            }
        </style>
    </head>
     <body>
            <div>
                按钮
            </div>
     </body>
</html>

样式效果：

点击按钮后样式效果：

:focus

:focus 多用元素成为焦点时的样式效果，这个经常用与表单控件元素上。

结构代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
     <body>
            <form action="#" method="post">
                <input type="text">
            </form>
     </body>
</html>

当想input获取焦点后，背景色为#CCC，实现代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            form input:focus {
                background: #CCC;
            }
        </style>
    </head>
     <body>
            <form action="#" method="post">
                <input type="text">
            </form>
     </body>
</html>

input获取焦点后效果图：

可以看到input获取焦点后背景色改为目标颜色的样式效果了。

注意事项

上述伪类选择器遵循顺序原则，也就是 link 到 visited 到 hover 再到 active 伪类。
hover和active又被列入到用户行为伪类中。

结构伪类

结构伪类是CSS3新设计的选择器，它利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更加简洁。

结构伪类有很多种形式，这些形式的用法是固定的，但可以灵活运用，以便设计各种特殊的样式效果。

:first-child

:first-child伪类结构可以用来选择某元素的第一个元素。

结构代码：

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

上面代码要控制div下的第一个p标签的样式，如果是以前没有接触过结构伪类的就只能使用类名和id名进行控制了，现在学到结构伪类了，就不必要在使用多余的类和id，上述要求实现代码如下：

<style>
    div p:first-child {

    }
</style>

这样就可以实现控制div下的第一个p标签了，可如果页面多个上述的结构代码，可我只想控制第一个div旗下的第一个p标签呢？这个时候可以给div加个类名进行精准定位。

:last-child

:last-child与:first-child的使用方法一致，不过不同的是它是从后往前数的第一个元素。

<style>
    div p:last-child {

    }
</style>

选择的则是div子元素的倒数第一个p标签。

:nth-child()

:nth-child()是一个结构伪类元素，它可以选择某个元素包含的一个或多个特定的子元素。该函数有多种用法：


:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n是从0开始计算*/
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length)/*选择大于或等于length的元素*/
:nth-child(-n+length)/*选择小与或等于length的元素*/
:nth-child(n*length+1)/*表示隔几选一*/

在nth-child()函数中，参数length为整数，n表示一个从0开始的自然数。

:nth-child()可以定义值，值可以是整数，也可以是表达式，如上述代码所示，用来选择特定的子元素。

main div:nth-child(1) {}

上述代码控制的是main主体标签下第一个div的标签，这用法在学习和开发中常用的用法。

table tr:nth-child(n){}

上述代码所控制的是table表格标签下所有的tr元素，这很像一个for遍历，n是逐渐＋1的；n的取值是从0开始的，什么时候结束要根据文档的结构而定。在实际的运用中这样使用是选中所有的子元素。

table tr:nth-child(2n) {}

上述代码控制的是table标签的tr元素，隔一选一，也就是选中偶数。

实现过程：

当n=0，则2n=0，表示没有选中任何元素；
当n=1，则2n=2，表示选择了第2个元素；
当n=2，则2n=4，表示选择了第4个元素；

以此类推。可用于控制表格的背景色，美化表格，可以做出word的美化表格效果。

上图效果，我简单写了下，就是使用上述的选择器选择可以很大程度的简化代码，还可以使表格样式更加好看。上述案例代码如下:

<!--css代码-->
<style>
        table {
            width: 500px;
            height: 300px;
            border-collapse: collapse;
        }

        tr {
            width: 500px;
            height: 50px;
            background-color: aqua;
        }

        tr:nth-child(2n) {
            background-color: red;
        }
    </style>
<!--html主代码-->
<table>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>

上述案例，仅供理解伪类选择器用法，如果想要很好看的样式效果，就需要自己构思了，我这里就不细讲了。

:nth-last-child()

它和:last-child是近乎相同的都是从后面开始选，不过前者只能选最后的第一个元素，后者也只可以选择一个元素。不过如果你要选择最后第二个呢？显然:last-child是用不了的，那这时就可以用它了，例如：

/*css*/
<style>
    div p:nth-last-child(2) {样式}
</style>
<!--html-->
<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

就可以选中<p>第二段</p>了。:nth-last-child()也有着:nth-child()一样的方法，用法一样，不过它是从后面开始算的。由于上面已经详细介绍过了，这李就不过多介绍，读者可以返回方面看看。

:nth-of-type()

:nth-of-type用于匹配属于父元素的特定类型的第n个子元素

/*css*/
<style>
    div p:nth-of-type(2) {
        background-color: orange;
    }
</style>
<!--html-->
<div>
    <h5>标题</h5>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
 </div>

上述代码，效果如下：

可以很直观的看到代码div p:nth-of-type(2) 参数是2，可效果是作用在第二个p标签的，它可以理解为自能选中p:nth-of-type(2) 在选择器(:)冒号前面指定标签，只会选中指定类型的第n位，对于其他标签忽略不计。

:nth-last-of-child()

它的用法和上述的:nth-of-child()一样，也是用于匹配属于父元素的特定类型的第n个子元素。

这里就不在演示了，读者不理解可以返回上一选择器在理解理解。

:empty

:empty选择器用来选择没有子元素或文本内容为空的所有元素，话不多说看案例：

效果如图所示：

代码：

/*css*/
    <style>
        div:empty {
            background-color: orange;
            width: 200px;
            height: 200px;
        }
        .box {
            border: 1px solid #ccc;
        }
    </style>

<!--html-->
<body>
    <div></div>
    <div class="box">
        <p>这是一个段落</p>
    </div>
</body>

可以看到:empty选择器是选择没有任何子元素和文本的标签，通俗点讲就是空标签。

否定伪类

:not()

:not()是排查或者过滤掉特定元素，案例：

效果：

代码：

/*css*/
    <style>
        a:not(a[class="nav_item"]) {
            text-decoration: none;
        }
    </style>
<!--html-->
<body>
    <a href="#" class="nav_item">第一个a标签</a>
    <a href="#">第二个a标签</a>
    <a href="#">第三个a标签</a>
</body>

可以看出来css代码中我们给a标签去除下滑线，伪类:not(参数) 参数中我们用属性选择器选中a标签class属性为nav_item的标签，把它作为:not()的参数，而:not()是用于排查或者过滤掉特定元素的，所以a标签为clanav_item"的a标签没有被选中。

状态伪类

<style> 
input:enabled
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}
</style>
<body>

<form action="">
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
Password: <input type="password" name="password" /><br>
<input type="radio" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car 
</form>

<p><b>注释：</b>本例只在 Opera 中正确地工作！</p>

</body>

考虑到这篇选择器介绍主要面向的是初学者，所以这里就不在展开来讲了(有兴趣的读者可以去W3C官网或菜鸟教程进一步学习，了解下，官网的教程更加有语义性)，因为这些选择器在学习和开发中都不常用，所以大家了解有这些选择器就可以了，不必要纠结于这几个选择器，可能很多参与工作的程序员都不太清楚。

目标伪类

:target

:target 用于选择匹配父元素的所有元素，且匹配元素被相关URL指向，从字面上很难理解，直接上案例;

效果：

初始效果如图所示，当我们点击干饭链接时，就会跳转的干法链接链接的锚点区域显示出来，覆盖掉学习链接的内容；如图：

代码：

 /*css*/
 <style>
        div {
            display: none;
        }
        #nav, #nav_item {
            width: 100px;
            height: 100px;
            background-color: orange;
            color: #fff;
        }
        :target {
            display: block;
        }
    </style>
<!--html-->
<body>
    <nav>
        <a href="#nav">学习链接</a>
        <a href="#nav_item">干饭链接</a>
    </nav>
    <div id="nav">
        今天也要好好学习啊
    </div>
    <div id="nav_item">
        也要好好干饭哦
    </div>
</body>

从代码结构上来看。我们可以看到a在这里是使用锚点链接，链接页面元素。我们先给div设置display: none;来隐藏div，在同过:target伪类来选择匹配父元素的所有元素，且匹配元素被相关URL指向，将display: block;当用户点击a超链接就会把div显示出来，它还可以实现背景图片的切换，读者可以思考下在怎么写，代码没有固定答案，子要把效果实现出来，就ok了，不过在实际开发中要满足语言的语义性；js有一个target事件，效果有点类似，感兴趣的读者可以去查阅相关文件。

结尾

到这里css伪类就学完了，由于本人的学识有限，可能有很多伪类选择器没有介绍，有知道的人可以在下面留言讨论，技术就是在交流中会有事半功倍的起效。在结尾我要告诫大家“多练，多练，学会不代表会用，会用不代表熟练”在日新月异的互联网，如果你想在这个行业有一的一席之地就要不断学习，推荐可以去菜鸟教程，W3C官网，以及github上去学习最新的知识。

本文借鉴书籍、网站：html+css+js入门、w3c、菜鸟

更多推荐

CSS伪类选择器详细讲解

CSS伪类选择器详细讲解

前言

正文

动态伪类

结构伪类

否定伪类

目标伪类

结尾

发布评论取消回复

最近发表

热门文章

标签列表

CSS伪类选择器详细讲解

前言

正文

动态伪类

结构伪类

否定伪类

目标伪类

结尾

相关文章

发布评论取消回复

最近发表

热门文章

标签列表