css3新增伪类伪元素

最新推荐文章于 2024-04-18 21:42:13 发布

533_

最新推荐文章于 2024-04-18 21:42:13 发布

阅读量390

点赞数

本文链接：https://blog.csdn.net/qq_14993591/article/details/118275489

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .para {
            /* 宽度、高度 */
            width: 100px;
            height: 100px;
            /* 边框 */
            border: 1px solid #000;
        }

        .para:empty {
            background-color: red;
        }

        input:focus {
            background-color: rgb(239, 243, 181);
        }

        input:disabled {
            border: 1px solid #000;
        }

        input:enabled {
            border: 1px solid rgb(17, 84, 209);
        }

        input:checked+span {
            color: red;
        }

        :root {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p class="para"></p>
    <p class="para"></p>
    <p class="para">123</p>
    <p class="para"> </p>

    <p>
        <input type="text">
        <input type="text">
        <input type="text" disabled>
        <input type="text" disabled>
        <input type="text">
    </p>

    <p>
        <input type="checkbox"> <span>文字</span>
        <input type="checkbox"> <span>文字</span>
        <input type="checkbox"> <span>文字</span>
        <input type="checkbox"> <span>文字</span>
    </p>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a::before {
            content: "■";
        }

        a::after {
            content: "❤";
        }

        .box1 {
            width: 400px;
            height: 300px;
            border: 1px solid #000;
        }

        .box1::selection {
            /* 背景颜色 */
            background-color: springgreen;
            color: deeppink;
        }

        .box1::first-letter {
            font-size: 50px;
        }

        .box1::first-line {
            /* 添加下划线 */
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <p>
        <a href="">我是超级链接</a>
    </p>
    <p>
        <a href="">我是超级链接</a>
    </p>
    <p>
        <a href="">我是超级链接</a>
    </p>

    <div class="box1">
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    </div>
</body>

</html>

在这里插入图片描述

533_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css3新增伪类伪元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .para { .
复制链接

扫一扫