伪类选择器的使用方法？伪类选择器有哪些

各位老铁们好，相信很多人对伪类选择器的使用方法都不是特别的了解，因此呢，今天就来为大家分享下关于伪类选择器的使用方法以及伪类选择器有哪些的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

谁能详细讲解一下CSS中的伪类选择器

和一般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。

第一种：

selector:pseudo-class{property: value}

例句：

a:link{color:red}

第二种：

selector.class:pseudo-class{property: value}

例句：

a.c1:link{color:red}

锚(a)伪类

锚(a)伪类是最常用的伪类。例句如下：

a:link{color:#FF0000}/*未被访问的链接红色*/

a:visited{color:#00FF00}/*已被访问过的链接绿色*/

a:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/

a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/

也可以用HTML的class属性来设定伪类。例句如下：

a.c1:link{color:#FF0000}/*未被访问的链接红色*/

a.c1:visited{color:#00FF00}/*已被访问过的链接绿色*/

a.c1:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/

a.c1:active{color:#0000FF}/*鼠标点中激活链接蓝色*/

注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。

伪类有：:first-child，:link:，vistited，:hover:，active:focus，:lang

伪元素有：:first-line，:first-letter，:before，:after

具体可以看看这个：

伪类(伪类选择器)

a标签有4种伪类（即对应四种状态），要求背诵。如下：

记住，在css中，这四种状态必须按照固定的顺序写：

a:link、a:visited、a:hover、a:active

如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

问：既然 a{}定义了超链的属性，和 a:link{}定义了超链点击之前的属性，那这两个有啥区别呢？

答：

a{}和 a:link{}的区别:

a{}定义的样式针对所有的超链接(包括锚点)

a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

如果同时需要，我们一定要将a标签写在前面，将:link、:visited、:hover、:active这些伪类写在后面。

a:link和 a:visited一起定义时，如果整个浏览器的访问历史中，有网址的访问记录，则会取 a:visited定义的样式，否则取 a:link，比如浏览器中访问过www.baidu.com（可以不在本页面中访问过），则一出来就会是 a:visited的样式

a:link和 a:visited样式相同时，可以只定义a元素选择器的样式

和

效果一样

我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。

我们不妨来举下例子。

举例1：

利用这个 hover属性，我们同样对表格做一个样式的设置：

表格举例：

CSS :hover伪类选择器

:hover选择器用于选择鼠标指针浮动在上面的元素。当鼠标悬停在元素上时，可使用此选择器设置元素的样式；它可用于每个元素。

语法：

与hover相关的伪类:

●:hover选择器可用于所有元素，不仅是链接。

●:link选择器设置了未访问过的页面链接样式,

●:visited选择器设置访问过的页面链接的样式

●:active选择器设置当你点击链接时的样式

说明：为了产生预期的效果，:hover必须位于:link和:visited之后（如果存在的话），这样样式才能生效。

示例1：在悬停在元素上时更改背景颜色。

效果图：

示例2：在文本上悬停时显示隐藏的块

效果图：

更多HTML的相关知识，可访问： web前端自学！!

如果你还想了解更多这方面的信息，记得收藏关注本站。