•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

css中伪类与伪元素怎样运用【html5教程】,伪类,伪元素

摘要: 伪类能够经由过程link,hover等要领给挑选器增加特别效果,伪元素经由过程:first-line增加首行款式,:first-letter增加首字母样,以下将细致引见这两方面的内容伪类...
伪类能够经由过程link,hover等要领给挑选器增加特别效果,伪元素经由过程:first-line增加首行款式,:first-letter增加首字母样,以下将细致引见这两方面的内容

伪类

它是挑选html文档的某些部份的体式格局,示意跟着时候的推移或经由过程用户干涉干与进入或许退出时元素的动态状况,原则上不属于html文档树自身及其元素或许是属性,实在CSS伪类是用来增加一些挑选器的特别效果,与伪元素差别,伪类能够出现在挑选器链中的任何位置。

a:link 示意未访问过的链接

<style>
a:link{
background-color: pink;
}

a : visit示意已访问过的链接

a:visited{
background-color: pink;
}


a:hover当鼠标移动到链接上时

a:hover{
background-color: pink;
}

a:hover 必需位于 a:link 和 a:visited 以后,如许才见效!

a:active :示意选中的链接

a:hover{
background-color: pink;
}
		a:active{
background-color: pink;
}

注重active一定要用在hover背面才会见效

伪元素

伪元素用于向某些挑选器设置特别效果,而且只能应用于外部和文档级上下文 , 而不是内嵌款式。它们能够只出现在挑选器链的末端,每一个挑选器只能指定一个伪元素。要在单个元素构造上处置惩罚多个伪元素,必需建立多个款式挑选器或声明语句。

:first-line伪元素

用于向文本的首行设置特别款式,只能用于块级元素

能够修正以下属性font,color,background,word-spacing,letter-spacing等

p:first-line 
{
color: pink;
font-variant: small-caps;/*改成大写*/

}
</style>
</head>
<body>
<p>
you are very good!
</p>


实用首行

:first-letter伪元素

用于向文本的首字母设置特别款式:

能够修正font,color,background,margin,padding,border等属性

p:first-letter 
{
color: pink;
font-variant: small-caps;/*改成大写*/

}
</style>
</head>
<body>
<p>
you are very good!

仅实用于首字母


总结:以上就是本篇文章的全部内容了,愿望对人人的进修有所协助。

以上就是css中伪类与伪元素怎样运用的细致内容,更多请关注ki4网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号