<!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{
font-size: 20px;
}
/*
伪元素,表示页面中的并不真实存在的元素(特殊的位置)
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开头
::after 表示元素的最后
-before和after必须结合content属性来使用
*/
p::first-letter{
font-size: 50px;
color: blue;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
/* span{
font-size: 30px;
} */
div::before{
content: 'abc';
color: red;
}
div::after{
content: 'haha';
color: skyblue;
}
</style>
</head>
<body>
<div>Hello,how are you? </div>
<q>beautiful</q>
<p>
<!-- <span>O</span>ur destiny offers not the cup of despair,but the chalice of opportunity. -->
Our destiny offers not the cup of despair,but the chalice of opportunity.
</p>
</body>
</html>
前端——伪元素选择器
最新推荐文章于 2021-07-09 17:16:49 发布