首页技术四种常用的伪类选择器?css选择器有哪几种

四种常用的伪类选择器?css选择器有哪几种

编程之家2026-06-231200次浏览

大家好,今天小编来为大家解答以下的问题,关于四种常用的伪类选择器,css选择器有哪几种这个很多人还不知道,现在让我们一起来看看吧!

四种常用的伪类选择器?css选择器有哪几种

伪类(伪类选择器)

a标签有4种伪类(即对应四种状态),要求背诵。如下:

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

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

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

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

答:

四种常用的伪类选择器?css选择器有哪几种

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元素选择器的样式

四种常用的伪类选择器?css选择器有哪几种

效果一样

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

我们不妨来举下例子。

举例1:

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

表格举例:

html 5 的CSS3新增的伪类选择器还包括哪些

:first-of-type p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。

:last-of-type p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。

:only-of-type p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。

:only-child p:only-child选择属于其父元素的唯一子元素的每个<p>元素。

:nth-child(n) p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。

:nth-last-child(n) p:nth-last-child(2)同上,从最后一个子元素开始计数。

:nth-of-type(n) p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。

:nth-last-of-type(n) p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。

:last-child p:last-child选择属于其父元素最后一个子元素每个<p>元素。

:root:root选择文档的根元素。

:empty p:empty选择没有子元素的每个<p>元素(包括文本节点)。

:target#news:target选择当前活动的#news元素。

:enabled input:enabled选择每个启用的<input>元素。

:disabled input:disabled选择每个禁用的<input>元素

:checked input:checked选择每个被选中的<input>元素。

:not(selector):not(p)选择非<p>元素的每个元素。

::selection::selection选择被用户选取的元素部分。

谁能详细讲解一下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

具体可以看看这个:

好了,文章到此结束,希望可以帮助到大家。

web前端和后端的区别,什么是前端开发和后端开发超级应用程序app?超级应用市场apk