css-伪元素选择器

最新推荐文章于 2024-06-18 09:54:27 发布

绘星者

最新推荐文章于 2024-06-18 09:54:27 发布

阅读量219

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_44808632/article/details/128103411

版权

伪元素:顾名思义,伪元素实际上不存在,它们是CSS提供的额外"福利",方便选中内容

伪元素选择器的前缀是::,但浏览器认为选择器是:(将::first-line看作:first-line),这样它的格式就和伪类选择器一致了.提倡:是为了向后兼容

`::first-line`选择器

选择文本块的首行

<style>
    p::first-line{
         /*      选择p元素的第一行文字     */
        width: 50em;
        background: yellow;
    }
</style>
<body>
    <p>
        Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
        Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
        Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
        Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
        Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
        Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
        Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
    </p>
</body>

即使页面改变大小导致文字错版该样式也始终应用于第一行文字

`::first-letter`选择器

选择文本块的首字母

注意是首个字母

`:brfore`和`:after`选择器

在选中元素的内容之前或之后插入内容

<style>
    a:before{
        content: "H";
    }
    a:after{
        content: " !";
    }
</style>
<body>
<a href="#">olleworld</a>
<a href="#">olleworld</a>
<a href="#">olleworld</a>
</body>

选择器内使用content属性,属性值为要插入的字符串

css计数器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css计数器</title>
    <style>
        body{
            counter-reset: paracount;
        }
        P:before{
            content: counter(paracount)".";
            counter-increment: paracount;
        }
    </style>
</head>
<body>
    <p>css计数器</p>
    <p>css计数器</p>
    <a href="#">css计数器</a>
    <p>css计数器</p>
    <p>css计数器</p>
</body>
</html>

要创建计数器，需要使用专门的counter-reset属性为计数器设置名称:counter-reset:paracount;

这行代码会初始化名为paracount的计数器,将它的值设为1;也可以指定其他初始值,在计数器后面添加一个数字即可:counter-reset:paracount 10;

如果想定义多个计数器,只需在同一条counter-reset声明中添加计数器名称就好了(也可以带上初始值),如:counter-reset:paracount 10 othercounter;
计数器初始化后就能作为content属性的值,跟:before和:after选择器一起使用来指定样式:content:counter(paracont)". ";

此条声明用在包括:before的选择器中,其效果是将当前计数器的值呈现在选择器匹配的所有元素之前,此处还要在相应的值后追加一个句点和空格