CSS中伪类选择器及伪元素

Posted 2020-08-06

1.伪类选择器

在CSS中，最常用的伪类选择器是使用在a（锚）元素上的几种选择器，它们的使用方法如下：

a:link{color:#FF0000;text-decoration:none}

a:visited{color:#FF0000;text-decoration:none}

a:hover{color:#FF0000;text-decoration:none}

a:active{color:#FF0000;text-decoration:none}

2.伪元素选择器

伪元素选择器不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，在CSS中主要有如下四个伪元素选择器：

(1)first-line伪元素选择器

<style type=text/css>

p:first-line{color:#0000FF};

</style>

(2)first-letter伪元素选择器

向某个元素中的文字的首字母（欧美文字）或第一个字（中日等汉字）使用样式。

 

<style type=text/css>

 

p:first-letter{color:#0000FF};

 

</style>

(3)before伪元素选择器

before伪元素选择器拥有在某个元素之前插入一些内容，使用方法如下：

元素:before{

content:""

}

<style type="text/css">

li:before{content:"hello"}

</style>

(4)after伪元素选择器

<style type="text/css">

li:after{

content:"hello";

font-size:12px;

color:red;

}

</style>