提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > css中伪类与伪元素怎样运用【html5教程】,伪类,伪元素

伪类能够经由过程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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css中伪类与伪元素怎样运用【html5教程】,伪类,伪元素"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线