伪元素选择器

本文最后更新于:2020年3月27日 晚上

伪元素选择器

设置首字母的样式

:first-letter设置了块级元素首字母的样式,并且仅仅对这首字母设置样式:

1
p:first-letter { color: red; }
设置第一行的样式

:first-line设置影响文本中第一行的样式:

1
p:first-line { font-size: 200%; }

⚠️:在CSS2中(以前):first-letter 和:first-line只能使用在块级元素中.在CSS2.1之后:first-line可以使用在任何元素中.

⚠️:所有的伪元素选择器应该放在选择器的最后面,如下是不合规则的:

1
2
/*这样写是不符合规则的,含有伪元素的选择器应该出现在最后*/
p:first-line em { font-size: 200%; }
⭐️设置之前和之后的样式

CSS2.1开始允许插入生成样式,使用:before和:after设置样式:

1
2
3
4
/*设置在文字前出现银色的中括号*/
p:before { content: "]]"; color: silver; }
/*这是在某元素之后出现的样式*/
body:after { content: " The End"; }