4.CSS选择器：伪类

伪类（伪类选择器）

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做"伪类"。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做"伪类"。

静态伪类选择器、动态伪类选择器

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后

PS: 以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover "悬停"：鼠标放到标签上的时候
:active "激活"：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签

超链接的四种状态：

:link "链接"：超链接点击之前
:visited "访问过的"：链接被访问过之后
:hover "悬停"：鼠标放到标签上的时候
:active "激活"：鼠标点击标签，但是不松手时。

记住，在css中，这四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

如果不按照顺序，那么将失效。"爱恨准则"：love hate。必须先爱，后恨。

举例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        /*让超链接点击之前是红色*/
        a:link{
            color:red;
        }

        /*让超链接点击之后是绿色*/
        a:visited{
            color:orange;
        }

        /*鼠标悬停，放到标签上的时候*/
        a:hover{
            color:green;
        }

        /*鼠标点击链接，但是不松手的时候*/
        a:active{
            color:black;
        }
    </style>
</head>
<body>
    <a href="http://www.jd.com">京东商城</a>
</body>
</html>

超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。

我们一定要将a标签写在前面，然后再写伪类。

动态伪类举例

（1）让文本框获取焦点时，显示蓝色边框

代码举例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        input:focus {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <input type="text" />
</body>
</html>

（2）鼠标悬停时，改变图片的透明度

代码举例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 300px;
            opacity: 0.5;
        }

        img:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <img src="images/car.jpg">
</body>
</html>

结构伪类选择器

CSS3中新增的选择器，是动态伪类选择器的补充。

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素
:nth-last-child(n) 倒数第n个子元素
:nth-child(odd) 奇数行
:nth-child(even) 偶数行
:nth-child(xn+y) 表示从y开始，每隔x个元素选中一个

举例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 500px;
            margin: 50px auto;
        }

        li {
            list-style: none;
            height: 30px;
            line-height: 30px;
            background-color: #eee;
            margin-bottom: 5px;
            padding-left: 10px;
        }

        /* 偶数行 */
        ul > li:nth-child(even) {
            background-color: #ddd;
        }

        /* 奇数行 */
        ul > li:nth-child(odd) {
            background-color: #ccc;
        }

        /* 第一个 */
        ul > li:first-child {
            background-color: #999;
        }

        /* 最后一个 */
        ul > li:last-child {
            background-color: #999;
        }

        /* 第3个 */
        ul > li:nth-child(3) {
            background-color: #888;
        }

        /* 从第4个开始，每隔2个 */
        ul > li:nth-child(2n+4) {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
        <li>列表项7</li>
        <li>列表项8</li>
    </ul>
</body>
</html>

否定伪类选择器

:not()选择器用于排除某些元素。

举例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        /* 所有的p元素，但是不包括第一个 */
        p:not(:first-child) {
            color: red;
        }

        /* 所有的p元素，但是不包括最后一个 */
        p:not(:last-child) {
            font-size: 20px;
        }

        /* 所有的p元素，但是不包括class为special的 */
        p:not(.special) {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
        <p>第1个p元素</p>
        <p class="special">第2个p元素</p>
        <p>第3个p元素</p>
        <p>第4个p元素</p>
        <p>第5个p元素</p>
    </div>
</body>
</html>

伪元素选择器

伪元素选择器用于向某些选择器设置特殊效果。

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始
::after 表示元素的最后

注意：

伪元素使用两个冒号，伪类使用一个冒号
::before和::after必须有content属性

举例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        /* 第一个字母 */
        p::first-letter {
            font-size: 20px;
            color: red;
        }

        /* 第一行 */
        p::first-line {
            background-color: yellow;
        }

        /* 选中的内容 */
        p::selection {
            background-color: green;
            color: white;
        }

        /* 元素的开始 */
        p::before {
            content: "《";
            color: red;
        }

        /* 元素的最后 */
        p::after {
            content: "》";
            color: red;
        }
    </style>
</head>
<body>
    <p>
        这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。
    </p>
</body>
</html>

总结

伪类选择器是CSS中非常重要的一部分，它们使我们能够根据元素的状态或位置来应用样式，而不需要额外的类或ID。

伪类选择器主要分为以下几类：

链接伪类：:link、:visited
动态伪类：:hover、:active、:focus
结构伪类：:first-child、:last-child、:nth-child()等
否定伪类：:not()

此外，还有伪元素选择器，如::first-letter、::first-line、::before、::after等，它们用于向某些选择器设置特殊效果。

在实际开发中，合理使用伪类和伪元素选择器可以减少HTML中的类和ID的使用，使代码更加简洁，同时也能实现更加丰富的样式效果。

4.CSS选择器：伪类 ​

伪类（伪类选择器） ​

静态伪类选择器、动态伪类选择器 ​

超链接a标签 ​

动态伪类举例 ​

结构伪类选择器 ​

否定伪类选择器 ​

伪元素选择器 ​

总结 ​

4.CSS选择器：伪类

伪类（伪类选择器）

静态伪类选择器、动态伪类选择器

超链接a标签

动态伪类举例

结构伪类选择器

否定伪类选择器

伪元素选择器

总结