首页技术css伪类选择器怎么用 css层次选择器有哪些

css伪类选择器怎么用 css层次选择器有哪些

编程之家2026-07-03905次浏览

本篇文章给大家谈谈css伪类选择器怎么用,以及css层次选择器有哪些对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。

css伪类选择器怎么用 css层次选择器有哪些

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

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

第一种:

selector:pseudo-class{property: value}

例句:

a:link{color:red}

第二种:

css伪类选择器怎么用 css层次选择器有哪些

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

例句:

a.c1:link{color:red}

锚(a)伪类

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

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

css伪类选择器怎么用 css层次选择器有哪些

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

具体可以看看这个:

CSS :hover伪类选择器

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

语法:

与hover相关的伪类:

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

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

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

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

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

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

效果图:

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

效果图:

更多HTML的相关知识,可访问: web前端自学!!

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层次选择器有哪些问题对您有所帮助,还望关注下本站哦!

activex控件下载官方?pageoffice控件下载免费网页模板下载,HTML模板