css（五）- 伪类选择器

最新推荐文章于 2020-10-09 17:50:51 发布

原创最新推荐文章于 2020-10-09 17:50:51 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS中各种伪类的选择器使用方法，包括链接状态（:link, :visited, :hover, :active）、元素位置（:first-child, :last-child, :nth-child）等，通过实例展示了如何为不同状态的元素应用样式。

部署运行你感兴趣的模型镜像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /*没有被访问过的a标签的样式 */
        .box ul li.item1 a:link {
            color: yellow;
        }
        /*访问过后的a标签的样式*/
        .box ul li.item2 a:visited {
            color: fuchsia;
        }
        /*鼠标悬停时的a标签的样式*/
        .box ul li.item3 a:hover {
            color: green;
        }
        /*鼠标点住的时候a标签的样式*/
        .box ul li.item4 a:active {
            color: darkmagenta;
        }
        /*选中第一个元素*/
        div ul li:first-child {
            font-size: 30px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child {
            font-size: 40px;
            color: yellow;
        }
        /*选中当前指定的元素 数值从1开始 0代表没有选中*/
        div ul li:nth-child(3) {
            color: darkorange;
            font-size: 20px;
        }
        /*n表示选中所有 从0开始*/
        div ul li:nth-child(n) {
            color: darkorange;
            font-size: 20px;
        }
        /*偶数*/
        div ul li:nth-child(2n) {
            color: aquamarine;
            font-size: 50px;
        }
        /*奇数*/
        div ul li:nth-child(2n-1) {
            color: aqua;
            font-size: 80px;
        }
        /*隔n行换色  隔3就是4n+1*/
        div ul li:nth-child(4n+1) {
            color: darkorange;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">坑</a>
            </li>
            <li class="item2">
                2
                <a href="#">蒙</a>
            </li>
            <li class="item3">
                3
                <a href="#">拐</a>
            </li>
            <li class="item4">
                4
                <a href="#">骗</a>
            </li>
            <li class="item4">
                5
                <a href="#">骗</a>
            </li>
            <li class="item4">
                6
                <a href="#">骗</a>
            </li>
            <li class="item4">
                7
                <a href="#">骗</a>
            </li>
            <li class="item4">
                8
                <a href="#">骗</a>
            </li>
            <li class="item4">
                9
                <a href="#">骗</a>
            </li>
        </ul>
    </div>
</body>
</html>

您可能感兴趣的与本文相关的镜像