CSS2.1定义了四个伪元素:
设置首字母样式(:first-letter)
设置第一行样式(:first-line)
设置之前样式(:before)
设置之后样式(:after)
所有伪元素都必须放在出现该伪元素的选择器的最后面。
设置首字母样式:用于设置第一个块级元素首字母的样式,而且仅对该字母设置样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p:first-letter{
color:red;
}
li:first-letter{
color:red;
}
</style>
</head>
<body>
<div>
<p>最好的我们</p>
<div>
<p>我不想在最剧了</p>
</div>
<p>我要<h2>好好</h2>看书了</p>
<em>天天向上</em>
<ul>
<li>成为前端开发工程师</li>
<li>成为前端开发工程师</li>
</ul>
</div>
</body>
</html>
设置第一行的样式:first-line可以用来影响元素中第一个文本行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background-color: #000;
color:gray;
width:200px;
}
p:first-line{
color:#fff;
}
ul{
background-color: #000;
color:gray;
}
ul:first-line{
color:#fff;
}
</style>
</head>
<body>
<div>
<p>美好的周六,睡到9点才起床,起床的动力是我要起来敲码。暴雨过后,重庆从炎炎夏日变成了下着小雨阴阴的秋天。
让我想起了昨晚追的网络剧最好的我们里的晚秋高地,然并卵,敲码吧</p>
<ul>
<li>美好的周六,睡到9点才起床</li>
<li>起床的动力是我要起来敲码</li>
</ul>
</div>
</body>
</html>
在css2中,:first-letter和:first-line伪元素只能应用于标记或段落之类的块级元素,而不能应用于超链接等的行内元素。