css伪元素选择器

最新推荐文章于 2024-10-05 17:04:37 发布

学习最大

最新推荐文章于 2024-10-05 17:04:37 发布

阅读量322

点赞数 6

分类专栏： css选择器文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62583212/article/details/135701293

版权

css选择器专栏收录该内容

4 篇文章 0 订阅

订阅专栏

作用：选中元素中的一些特殊位置。

常用伪元素：

::first-letter 选中div中的第一个文字。
::first-line 选中div中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容）。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择div中的第一个文字 */
        div::first-letter{
            color: red;
            font-size: 40px;
        }
         /* 选择div中的第一行文字 */
        div::first-line{
            background-color: yellow;
        }
        div::selection{
            background-color: green;
            color: orange;
        }
         /* 选择input中的提示的文字 */
        input::placeholder{
            color:paleturquoise;
        }
        p::before{
            content: "￥";
            color: red;
        }
        p::after{
            content: ".00";
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus molestias ducimus quibusdam in itaque fuga pariatur, eaque aut nulla omnis id accusamus eligendi porro distinctio similique eius enim amet tempora odit possimus sequi. Dolores velit vitae ratione iure molestias eveniet quos aspernatur. Aspernatur quia id iste corporis perspiciatis hic modi expedita sapiente asperiores. Facere inventore eos minima? Nam, a illum.</div>
    <hr>
    <input type="text" placeholder="请输入用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
</body>
</html>

效果：