CSS_2——伪元素选择器
2021/8/23 6:30:39
本文主要是介绍CSS_2——伪元素选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. ::first-line选择器
匹配文本的第一行内容(仅限第一行)
::first-line选择器仅对块级元素内的第一行内容有效,而对于像a元素这类行内元素,是不起作用的.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < style > ::first-line{ background: yellow; } </ style > < header data-yellow = "true" >< h4 >一个无序列表:</ h4 ></ header > < section > < p >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure illum nemo vero eius assumenda saepe veniam necessitatibus ratione, rem aperiam perspiciatis aspernatur quasi reprehenderit perferendis amet. Beatae voluptates id labore.</ p > </ section > < section >Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae perspiciatis doloremque iusto nihil dicta reiciendis sapiente blanditiis, nisi pariatur nobis doloribus, at dolorem libero ipsum qui, repudiandae ipsa asperiores repellat.</ section > |
可以限定只对p元素起作用
只需要在::first-line前加上p就行
2. ::first-letter选择器
用于匹配每一行的第一个字
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < meta http-equiv = "”Content-Type”" content = "”text/html;" charset = "utf8″" > < style > ::first-letter{ background: yellow; color: coral; } </ style > < header data-yellow = "true" >< h4 >一个无序列表:</ h4 ></ header > < section > < p >凡是过往,皆为序章</ p > </ section > < section > 我从未觉得孤独,说的浪漫些,我完全自由。 </ section > |
3. ::before和::after
可以在指定元素前后加入文字或是图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < meta http-equiv = "”Content-Type”" content = "”text/html;" charset = "utf8″" > < style > p::before{ content:"我说:" } p::after{ content:url(https://pic.wodingche.com/carimg/fgpbifebz.jpeg) } </ style > < header data-yellow = "true" >< h4 >一个无序列表:</ h4 ></ header > < section > < p >人生何其短 笑要格外甜</ p > </ section > < section > 我从未觉得孤独,说的浪漫些,我完全自由。 </ section > |
4. ::selection选择器
鼠标选中后添加效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < meta http-equiv = "”Content-Type”" content = "”text/html;" charset = "utf8″" > < style > ::selection{ color: yellow; background: red; } </ style > < header data-yellow = "true" >< h4 >一个无序列表:</ h4 ></ header > < section > < p >人生何其短 笑要格外甜</ p > </ section > < section > 我从未觉得孤独,说的浪漫些,我完全自由。 </ section > |
这篇关于CSS_2——伪元素选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
原文链接: https://www.cnblogs.com/Nadir-Echo/p/15174259.html
- 2024-12-26CSS入门指南:从零开始学CSS
- 2024-12-26CSS基础入门教程
- 2024-12-25CSS基础知识入门教程
- 2024-12-25CSS考点入门教程:掌握基础知识点
- 2024-12-25CSS考点解析:初学者必会的基础教程
- 2024-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南