css——常见的伪元素

最新推荐文章于 2023-10-27 23:56:06 发布

YUHUI01

最新推荐文章于 2023-10-27 23:56:06 发布

阅读量882

点赞数

分类专栏： CSS 文章标签： css 伪元素

本文链接：https://blog.csdn.net/yuhui01/article/details/102851553

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <style>
        /* 创建一个伪元素，该元素代表所选HTML元素的最后一个子元素。它用于与CSS content属性协作将样式添加到此特定元素 除Safari和Opera外*/
        .one::after {
            content: '-1';
            color: blue;
        }
        .two::after {
            content: '-2';
            color: red;
        }
        /* 创建一个伪元素，该元素代表所选HTML元素的第一个子元素。默认情况下，它是内联的，用于与CSS content属性协作将样式添加到此特定元素 除Safari，Internet Explorer 9和Opera外*/
        .one::before {
            content: '1-';
            color: blue;
        }
        .two::before {
            content: '2-';
            color: red;
        }
        /* 创建一个伪元素，表示一个块元素第一行的第一个字母，只要它不在图像或表格之后。 除了iOS设备上的Safari以外*/
        p::first-letter {
            color: red;
            font-size: 130%;
        }
        p {
            font-size: 130%;
        }
        /* 创建一个伪元素，该伪元素代表block元素的第一行。就像第一个字母一样，第一行也取决于一些因素 */
        p::first-line {
            color: red;
            font-size: 130%;
        }
        /* 伪元素选择列表项的标记框，该列表框通常包含项目符号或数字。它用于列表项和摘要元素（多用于ui li列表）仅受Firefox支持 */
        li::marker {
            font-size: 200%;
            color: #00b7a8;
            font-family: "Comic Sans MS", cursive, sans-serif;
        }
        /* 伪元素指向演示文稿中输入元素的占位符，通常在表单中找到。默认情况下，大多数浏览器会将浅灰色应用于占位符 除IE*/
        input::placeholder {
            color: red;
            font-size: 1.2em;
            font-style: italic;
        }
        /* 伪元素适用于DOM上突出显示的元素（鼠标选择状态下） */
        p::selection {
            background-color: red;
        }
    </style>
</head>

<body>
    <p class="one">
        This is my very first paragraph.
        This is my very first paragraph.
        This is my very first paragraph.
        This is my very first paragraph.</p>
    <p class="three">This is my second paragraph.</p>
    <p class="two">This is my last but not the least paragraph</p>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <input placeholder="Type something here!">
</body>
</html>

YUHUI01

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css——常见的伪元素

<!DOCTYPE html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <style> /* 创...
复制链接

扫一扫