解析CSS中的伪元素及其与伪类的区别
122 浏览量
2020-09-24
21:49:57
上传
评论
收藏 70KB PDF 举报
解析解析CSS中的伪元素及其与伪类的区别中的伪元素及其与伪类的区别
CSS伪元素能使我们添加案定的HTML元素之外的元素,这里我们就来解析CSS中的伪元素及其与伪类的区别,需
要的朋友可以参考下
伪元素伪元素
我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐
观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动，及新增一个元素（照顾到IE8浏览
器这里使用单冒号）。但是content的可取值有哪些呢？
1. 字符串： content: “a string”- 注意：特殊字符必须使用unicode编码；
2. 图片： content: url(/path/to/benjamin.png) – 图片以原始尺寸插入，不能调整大小。因图片支持渐变，因此可以对伪元素使
用渐变效果；
3. 无字符： content: “”- 这个在清除浮动和设置背景图片比较有用，我们可以设置背景图片的width和height，甚至我们可以使
用background-size属性来调整背景图片大小；
4. 计数器： content: counter(li)- 在:marker出现之前，对于设置列表序号样式比较有用；具体参见下面代码：
CSS Code复制内容到剪贴板
1. ol {
2. countercounter-reset: li;
3. }
4. ol>li {
5. position: relative;
6. padding-left: 2em;
7. line-height: 30px;
8. list-style: none;
9. }
10. ol>li:before {
11. position: absolute;
12. top: 8px;
13. left: 0;
14. height: 16px;
15. width: 16px;
16. line-height: 16px;
17. text-align: center;
18. content: counter(li);
19. countercounter-increment: li;
20. border-radius: 50%;
21. background-color: #ccc;
22. font-size: 12px;
23. color: #efefee;
24. }
PS：我们不能设置content: “<h2>Benjamin</h2>”，它不会解析按HTML代码片段解析，而会解析为字符串；
5. content: attr(attrName)
content可以利用attr函数获取属性值，尤其使用在伪类中比较方便。见如下代码：
CSS Code复制内容到剪贴板
1. <style type="text/css">
2. .list li {
3. list-style: none;
4. margin-bottom: 20px;
5. }
6. .list li span {
7. vertical-align: middle;
8. }
9. .list li:before {
10. content: attr(data-index);
11. display: inline-block;
12. width: 20px;
13. height: 20px;
14. text-align: center;
15. color: #fff;
16. vertical-align: middle;
17. background-color: #f00;
18. border-radius: 50%;
19. }
资源评论
