CSS伪类和伪元素

最新推荐文章于 2025-09-29 08:55:50 发布

原创最新推荐文章于 2025-09-29 08:55:50 发布 · 931 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

该文章已生成可运行项目，

CSS伪类：
CSS 伪类是一种选择器，用于选择处于特定状态或位置的元素，而不需要在 HTML 中添加额外的类或 ID。它们以冒号（:）开头，可以与其他选择器组合使用，增强样式的灵活性和动态性，伪类可以看作以选中元素为基准点，此元素的一些状态或属性。

常见的css伪类：
链接伪类

link：选择未访问的链接。
visited：选择已访问的链接。
hover：鼠标悬停在元素上时触发。
active：元素被激活（如点击时）的状态。

结构伪类
first-child：选择作为父元素第一个子元素的元素。
last-child：选择作为父元素最后一个子元素的元素。
nth-child(n)：选择作为父元素第 n 个子元素的元素，n可以是数字、表达式（如2n、odd、even）。
nth-last-child(n)：与:nth-child类似，但从最后一个子元素开始计数。
only-child：选择作为父元素唯一子元素的元素。

目标伪类
target：选择当前 URL 锚点指向的元素（如#section1）。

使用代码为超链接添加不同样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS伪类</title> 
    <style>
        /* 改变颜色 */
        a.one:link {color:#ff00c3;}
        a.one:visited {color:#0000ff;}
        a.one:hover {color:#00ffff;}
        /* 改变字体大小 */
        a.two:link {color:#ff00c3;}
        a.two:visited {color:#0000ff;}
        a.two:hover {font-size:200%;}
        /* 改变背景颜色 */
        a.three:link {color:#ff00c3;}
        a.three:visited {color:#0000ff;}
        a.three:hover {background:#9500ff;}
        /* 改变字体类型 */ 
        a.four:link {color:#ff00c3;}
        a.four:visited {color:#0000ff;}
        a.four:hover {font-family:Georgia, serif;}
        /* 改变文字修饰 */
        a.five:link {color:#ff00c3;text-decoration:none;}
        a.five:visited {color:#0000ff;text-decoration:none;}
        a.five:hover {text-decoration:underline;}
    </style>
    </head>
    <body>
        <p>将鼠标移至链接上改变样式.</p>
        <p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
        <p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
        <p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
        <p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
        <p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
    </body>
</html>

运行结果：

CSS伪元素

CSS 伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置，CSS 伪元素是用来添加一些选择器的特殊效果。在定义伪元素时，必须定义content属性; ，伪元素本身是行内元素，如果要定义为其配置宽高则需要定义display属性为 block;（转为块级元素）或者line-bolck（行内块元素）。

常见的CSS伪元素
before 和 ::after first-line first-letter selection placeholder

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        ul li{
            list-style: none;
            width: 15%;
            height: 30px;
            background-color: blueviolet;
            border: 2px green solid;
        }
        #yy::before{
            content:"";
            display: block;
            list-style: none;
            width: 50%;
            height: 30px;
            background-color: darkgoldenrod;
            border: 2px hotpink double;
        }
        ul::after{
            content:"";
            display: block;
            list-style: none;
            width: 15%;
            height: 30px;
            background-color: pink;
            border: 2px gold solid;
        }
    </style>
</head>
<body>
    <ul>
        <li id="yy">100</li>
        <li>yy</li>
        <li>1</li>
    </ul>
</body>
</html>

运行结果：