CSS伪元素是什么？
什么?伪元素?之前不是说了伪类吗，怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵，其实伪类和伪元素是两个不同的概念，今天小编就为大家介绍一下伪元素。http://www.kokojia.com/Public/images/upload/article/2016-09/57eb69137de16.png 一、什么是伪元素 css伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 二、语法 伪元素的语法： selector:pseudo-element{property:value;} 标签：伪元素{性质:值;} CSS类也可以与伪元素配合使用： selector.class:pseudo-element{property:value;} 标签类：伪元素{性质:值;} 三、伪元素和CSS类 伪元素可以与CSS类配合使用：http://www.kokojia.com/Public/images/upload/article/2016-09/57eb6849041c7.jpg 上面的例子会使所有class为article的段落的首字母变为红色。 四、:first-line伪元素和:first-letter伪元素 1.:first-line伪元素 "first-line"伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据"first-line"伪元素中的样式对p元素的第 一行文本进行格式化：http://www.kokojia.com/Public/images/upload/article/2016-09/57eb6aedce3ef.jpg 效果:http://www.kokojia.com/Public/images/upload/article/2016-09/57eb69f404215.jpg 注释：1."first-line"伪元素只能用于块级元素。 下面的属性可应用于"first-line"伪元素： font color background word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear 2.:first-letter伪元素 "first-letter"伪元素用于向文本的首字母设置特殊样式：http://www.kokojia.com/Public/images/upload/article/2016-09/57eb6b0a85ecb.jpg 效果:http://www.kokojia.com/Public/images/upload/article/2016-09/57eb6b631450f.jpg 注释："first-letter"伪元素只能用于块级元素。 下面的属性可应用于"first-letter"伪元素： font color background margin padding border text-decoration vertical-align(仅当float为none时) text-transform line-height float clear 五、:before和:after伪元素 1.CSS2-:before伪元素 ":before"伪元素可以在元素的内容前面插入新内容。 2.CSS2-:after伪元素 ":after"伪元素可以在元素的内容之后插入新内容。 六、多重伪元素 结合多个伪元素使用可以创造出多种效果。 在下面的例子中，段落的第 一个字母将显示为红色，其字体大小为xx-large。第 一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：http://www.kokojia.com/Public/images/upload/article/2016-09/57eb6d3192d1e.jpg 效果:http://www.kokojia.com/Public/images/upload/article/2016-09/57eb6df0f2b76.jpg 最 后小编为大家总结一些常用的伪元素。 CSS列指示出该属性在哪个CSS版本中定义http://www.kokojia.com/Public/images/upload/article/2016-09/57eb6e561f2ab.jpg 以上就是CSS伪元素的全部内容,理论是学习的开始,关键是在学会理论的基础上,能灵活运用,譬如CSS的伪元素,如果合理使用多重伪元素是可以创造出奇妙效果的。 原文来自厚学网:https://www.houxue.com/news/387769.html
页:
[1]