CSS(二)
坑军之王
163
选择器通过对HTML界面中的元素的选择，使用CSS进行样式控制。而有一些选择器，相较于选择器拥有更复杂的功能，而他们不是对应HTML中的元素，而是针对CSS中已有的伪元素起作用。
伪选择器主要分为伪类选择器和伪元素选择器。以下对伪元素选择器进行一定的说明：
伪元素选择器的生效对象并不是一个对象，而是基于CSS中已经存在的元素所对应的伪元素生效。
|
选择器 |
说明 |
|
：first-letter |
对指定对象中的第一个字符其作用 |
|
：first-line |
对指定对象的第一行其作用 |
|
：before |
对指定对象之前添加内容 |
|
：after |
对指定对象之后添加内容 |
在这些选择器中，“：first-letter”和“：first-line”的生效对象必须是块级元素，其中“：first-letter”的生效对象的display的属性值可以是block, inline-block, table-cell, list-item或者table-caption。“：before”和“：after”在生成的时候默认视作行内元素，可以通过display进行元素类型的转换。
在使用:before和:after时，插入的内容需要在content属性中写出，内容可以是文字，可以是图片，也可以是利用“width”、“height”、“border”制作出来的形状，甚至还能添加音频、视频这些多媒体文件，而且这个属性的内容具有高度自定义性。
代码：
<style>
.father p:before{content:”这是添加的内容”
background-color:aqa;
}
</style>
<body>
<div class=”father”>
<p>元素的内容</p>
</div>
</body>
quotes：
首先需要在类处定义quotes的内容，随后使伪为元素选择器在content中定义open-quote和close-quote进行填充。
代码：
<style>
.father p.book{
quotes: "<<" ">>";
}
.father p.book::before{
content: open-quote;
}
.father p.book::after{
content: close-quote;
}
</style>
<body>
<p class=”book”>小王子</book>
</body>
利用counter-increment实现计数标号
使用方法和quote一样，在确定的类上定义相关属性，随后使用伪元素选择器进行选择。
<style>
div>p{
counter-increment: count;
}
div>p::before{
content: counter(count) '.';
padding-right: 2px;
}
</style>
<body>
<div>
<p>这是第一行的文本内容</p>
<p>这是第二行的文本内容</p>
<p>这是第三行的文本内容</p>
</div>
</body>
