您好!欢迎来到静学网! 注册 登入
  • 致力中国及国外独立搜索引擎技术及第三方网站搜索引擎SEO排名研究

[SEO优化]什么是伪元素?伪元素的使用及详解

课程目录 SEO资深顾问 次浏览
什么是伪元素?刚接触的朋友或者不经常使用的朋友或许并不是很了解,不过没关系,如果忘记了可以看看手册就记得了,CSS伪元素的出现可以说是选择器的有一个高层次的使用,让选择更加富于变化,能够控制局部变化,弥补了选择器的不足之处,下面我们一起来看看伪元素的具体用法和种类。
 
一 伪元素语法结构
 
伪元素的语法:selector:pseudo-element {property:value;},同时CSS 类也可以与伪元素配合使用:selector.class:pseudo-element {property:value;}。常见伪元素有:first-letter(向文本的第一个字母添加特殊样式)、:first-line(向文本的首行添加特殊样式)、:before(在元素之前添加内容)、:after(在元素之后添加内容)
 
二 伪元素详解及具体应用
 
1 :first-line应用
注意:first-line只能应用于块级元素,如p标签中,具体属性有font、color、background、word-spacing、text-decoration、vertical-align、text-transform、line-height、clear。示例如下:
<style>
p:firt-line{
color:red;
}
</style>
<p>css css css css css </p>
 
注意这个只有第一行有效果,根据浏览器窗口变化,第二行将失去效果。
伪元素
 
2 :first-letter
 
同样,这个伪元素也只是适用于块级元素,具体应用属性有:font、color、background、margin、padding、border、text-decoration、vertical-align、text-transform、line-height、float、clear。示例如下:
<style>
p:firt-letter{
color:red;
}
</style>
<p>css css css css css </p>
第一个字母会变成红色
 
3 伪元素和 CSS 类应用
 
<style>
p.letter:firt-letter{
color:red;
}
</style>
<p class=’letter’>css css css css css </p>
 
第一个字母变红色
 
4 :before 伪元素
 
此伪元素的作用是在什么之前变化,一般加某些内容。比如我要在上面例子中加js这个内容,那么怎么加呢?很简单直接用这个伪元素。
<style>
p.letter:before{
content:”js”;
}
</style>
<p class=’letter’>css css css css css </p>
 
结果为js css css css css css
 
5 :after 伪元素应用
 
与:before 伪元素的作用刚好相反,是在什么之后的意思,也就是可以在后面加任何元素。<style>
p.letter:after{
 
content:”js”;
 
}
</style>
<p class=’letter’>css css css css css </p>
 
结果为css css css css cssjs
 
 
更多前端内容和SEO优化内容请关注SEO精学网。http://www.seojingxue.com
 

静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明[SEO优化]什么是伪元素?伪元素的使用及详解
顶一下
(1)
踩一下
(1)
友情链接:
网站优化
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com