来源: 吾推网
发布时间: 2023-07-05
次浏览
CSS伪类：
1. p:before表示p标签前面插入内容。
p:after表示p标签前面插入内容。
例如：
<body>
<p>b</p>
</body>
<style>
p:before{
content: 'a';
}
p:after{
content: 'c';
}
</style>
说明：表示往p标签前面插入a，后面插入c,最终在页面上就会展示出现“abc”
2. p:before{content: attr(data-content);}通过data-***动态获取插入数据。
例如：
<body>
<p data-txt="我是动态获取的">attr</p>
</body>
<style>
p:before{
content: attr(data-txt);
}
</style>
说明：页面上会展示出现“我是动态获取的attr”
4.p:before{content: url(./img/test.jpg);}除了插入字符还可以插入图片
5.p:before{content: lang}多语言应用
例如：
<body>
<p lang="ch"><q>我是<q>中文</q></q></p>
<p lang="en"><q>我是<q>英文</q></q></p>
</body>
<style>
q:lang(ch){
quotes: "“" "”" "{" "}"; // 前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套
}
q:lang(en){
quotes: "'" "'" "[" "]"; // 前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套
}
</style>
说明：页面上会展示出现“我是｛中文｝”和‘我是[英文]’两句话
6.p::before是CSS3中的写法，为了将伪类和伪元素区分开。但是平时为了兼容性，还是会用一个冒号的写法。
以下为代码截图：
以下为页面展示截图：
以下为代码截图：
以下为页面展示截图：