CSS伪元素_1

时间：2023-03-31 13:23:46 CSS

1。定义及特征定义：伪元素，顾名思义，就是一种伪元素。html中没有对应的元素，但它的所有使用和表现行为都与真实的页面元素相同。你可以使用和页面元素一样的css样式，表面上看是页面的一些元素显示出来的，但实际上是css样式显示的行为，所以称为伪元素。特点：1.可以减少dom元素；2、必须和content属性一起使用，否则不生效，伪元素默认是内联的，但是可以用display属性调整；3、结构无法审查，不方便调试；4.js不能操作，增删改查等2.分不清：还是::？在CSS2和CSS1中，伪类和伪元素都使用单冒号语法。在CSS3中，双冒号取代了伪元素的单冒号符号。这是W3C试图区分伪类和伪元素的尝试。为了向后兼容，CSS2和CSS1伪元素接受单冒号语法。3.CSS伪元素选择器示例示例Description::afterp::after在每个元素之后插入内容。::beforep::before在每个元素之前插入内容。::first-letterp::first-letter选择每个元素的第一个字母。::first-linep::first-line选择每个元素的第一行。::selectionp::selection选择用户选择的元素部分。三、使用场景1.content:''，如果没有content，写空字符串。示例：清除浮动

.box:after{content:'';显示：块；明确：两者；*zoom:1;/*IE6-7不支持：after需要触发hasLayout*/}2.content:attr(attr_name)，将伪元素的内容与主元素关联的一个属性值进行比较，其内容是主元素的指定属性的值示例：wordtooltip

我们有一些words一些提示。
把鼠标放在上看。

span[data-descr]{position:relative;文本修饰：下划线；颜色：#00F；cursor:help;}span[data-descr]:hover::after{content:attr(data-descr);位置：绝对；左：0；顶部：24px；最小宽度：200px；:1px#aaaaaa固体;边界半径：10px；背景色：#ffffcc；填充：12px；颜色：#000000；字体大小：14px；z-index:1;}3、content:url()/uri()，插入一个外部资源文件，可以是图片、音频、视频文件或浏览器支持的任何其他资源。12