<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-letter{
font-size:100px;
}
/*
伪元素:表示一些特殊的并不真实存在的元素(特殊的位置)
伪元素使用 ::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
:: before 元素开始的位置
:: after 元素结束的位置
-befor和after必须结合content属性使用
*/
p::fitst-line{
background-color:red;
}
div::before{
content:'abc'
}
</style>
</head>
<body>
<div>耐心,静心</div>
<p>
<span>xuexi</span>
<span>xuexi</span>
<span>xuexi</span>
<span>xuexi</span>
静心
</p>
</body>
</html>
前端笔记——伪元素选择器
最新推荐文章于 2024-04-24 08:26:26 发布