2-20 编程练习作业提交

来源：2-20 编程练习

我在浪费钱

2021-08-20 15:47:51

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        p {
            height: 30px;
        }

        /*补充代码*/
        /* 页面上的3个链接，默认样式不带下划线 */
        a {
            text-decoration: none;
        }
        /* 当链接未被访问时，链接的字体颜色是橘色； */
        a:link {
            color: orange;
        }
        /* 当鼠标悬停在链接上时，链接字体变为20px，并且有1个像素的红色边框 */
        a:hover {
            font-size: 20px;
            border: 1px solid red;
        }
        /* 当“衣服鞋帽”被访问了，字体颜色变为绿色 */
        .suit a:visited {
            color: green;
        }
        /* 当“厕所清洁”被访问了，字体颜色变为蓝色 */
        .wc a:visited {
            color: blue;
        }
        /* 当“化妆用品”被访问了，字体颜色变为紫色 */
        .skin a:visited {
            color: purple;
        }
    </style>
</head>

<body>
    <h2>商品列表</h2>
    <p class="suit">
        <a href="#1">衣服鞋帽</a>
    </p>
    <p class="wc">
        <a href="#2">厕所清洁</a>
    </p>
    <p class="skin">
        <a href="#3">化妆用品</a>
    </p>
</body>

</html>