526互联

css之伪元素选择器

发布时间 2023-12-15 11:16:00作者: 惟-koko

注：本博客内容来自尚硅谷禹神的前端入门课程

什么是伪元素？

很像元素，但不是元素（element），是元素中的一些特殊位置。

伪元素语法中的::可以用:，因为css2中没有明确区分伪类和伪元素，但是selection和placeholder是css3才出现的新特性，所以必须用::

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /* 选中的是div里的第一个元素 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div的第一行元素 */
        div::first-line  {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选中的文字 */
        div::selection {
            background-color: yellowgreen;
            color: orange;
        }
        /* 选中的是input中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content: "¥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content: ".00";
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni veritatis id dolor quibusdam reiciendis officia saepe, delectus autem, cumque, non similique quam maxime! Dolorum sunt atque consectetur suscipit praesentium ex!</div>
    <br>
    <input type="text" placeholder="请输入您的用户名">
    <p>199</p>
    <p>299</p>
</body>
</html>
​