8 、::selection 选择器
::selection选择器 匹配元素中被用户选中或处于高亮状态的部分。
::selection只可以应用于少数的CSS属性:color, background, cursor,和outline
代码如下:
<title>::selection 选择器</title> <style> /* ::selection选择器 匹配元素中 被用户选中或处于高亮状态 的部分 */ /* 给 被 你 选中 的文本 , 设置 样式规则 被选中 的那个标签 才会显示 上面所写的 样式修饰*/ ::selection{ color: aqua; background-color: coral } </style> </head> <body> <div>人对异性产生好感的那股燃烧起来的激情里,让人感觉到自己正在真实地活着。</div> <p>小李子</p> <h1>是大蠢猪</h1> <a href="">憨憨</a>
注意:
cursor,和outline ,鼠标的样式和轮廓线的样式,实际预览无效果。所以,我们用这个选择器的时候,要么设置 color,要么设置background。
预览:
9 、::before 选择器
css3 :before选择器,绘制图形,并且给其设置定位,才会有作用。
:before 选择器向选定的元素前插入内容
代码如下:
<title>::before 选择器</title> <style> .box{ width: 300px; height: 300px; background-color: cornflowerblue; margin: 30px auto 0; /* (父)相对定位 */ position: relative; } /* 在当前盒子的前面 绘制一个图像 */ /* 用before伪类绘制图形,有3个大前提, (1) 你要写content属性 (2) 你要写定位---绝对定位 (3) 你要给 这个before伪类图形 的父元素, 设置相对定位 (before的爸爸是box这个盒子) */ .box::before{ content: ''; width: 100px; height: 200px; background-color: coral; /* (子)绝对定位 */ /* 注意:默认 你不给它设置位置, 他在父盒子的 左上角 显示 */ position: absolute; /* 如果写的是负值,那么在浏览器中盒子的位置是与vscold写的位置方向一致 如果写的是正直,那么在浏览器中盒子的位置是在svcold中写的方向是反的 若写的是right:50px 则是盒子靠近左边 距离右边50像素 */ left: -100px; top: 0px; } </style> </head> <body> <div class="box"></div>
注意:
使用 :before 和 :after 选择器的时候,一定要有content这个属性。没有这个属性,图形不显示。
预览:
10 、::after 选择器
css3 :after选择器,绘制图形,并且给其设置定位,才会有作用。
:after 选择器向选定元素的最后子元素后面插入内容。
代码如下:
<title>::before 选择器</title> <style> .box{ width: 300px; height: 300px; background-color: cornflowerblue; margin: 30px auto 0; /* 相对定位 */ position: relative; } /* 在当前盒子的前面 绘制一个图像 */ /* 用before伪类绘制图形,有3个大前提, (1) 你要写content属性 (2) 你要写定位---绝对定位 (3) 你要给 这个before伪类图形 的父元素, 设置相对定位 (before的爸爸是box这个盒子) */ .box::before{ content: ''; width: 100px; height: 200px; background-color: coral; /* 绝对定位 */ /* 注意:默认 你不给它设置位置, 他在父盒子的 左上角 显示 */ position: absolute; left: -100px; top: 0px; } .box::after{ content: ''; width: 100px; height: 100px; background-color: cyan; /* 绝对定位 */ position: absolute; right: -100px; top: 0; } </style> </head> <body> <div class="box"></div>
预览: