您现在的位置是：网站首页> 编程资料编程资料

解析CSS中的伪元素及其与伪类的区别详解如何使用CSS3中的结构伪类选择器和伪元素选择器详解CSS中的伪类与伪元素及二者间的区别浅谈CSS伪类与伪元素CSS伪类和伪元素的区别详解css3 伪元素和伪类选择器详解CSS伪类/伪元素选择器整理css伪类伪元素域高级选择器的介绍CSS伪类与CSS伪元素的区别及由来具体说明浅谈CSS 伪元素&伪类的妙用

2021-09-05 972人已围观

简介 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: “

Benjamin

”，它不会解析按HTML代码片段解析，而会解析为字符串；
5. content: attr(attrName)
content可以利用attr函数获取属性值，尤其使用在伪类中比较方便。见如下代码：

CSS Code复制内容到剪贴板
  1. "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.     }   
  20.   
  21. "list">   
  22.     "1">专注前端开发和用户体验
    23.   
  23.     "2">专注前端开发和用户体验
    24.   
  24.     "3">专注前端开发和用户体验
    25.   
  25.     "4">专注前端开发和用户体验
    26.   
  26.     "5">专注前端开发和用户体验
    27.   
  27.   

说了前面的话，下面说说IE中遇到的bug:
Bug描述：使用伪类实现”+”/”-“号图像切换时，通过增加和移除opened类来实现，但是在IE8中效果怪异，无法正确渲染，其它浏览器中正常：

CSS Code复制内容到剪贴板
  1. .plus {   
  2.     position: relative;   
  3.     display: inline-block;   
  4.     vertical-align: top;   
  5.     width: 20px;   
  6.     height: 20px;   
  7.     margin-right: 24px;   
  8.     border: 1px solid #fdaa47;   
  9.     border-radius: 3px;   
  10.     overflow: hidden;   
  11. }   
  12. /* 横向 */    
  13. .plus:before {   
  14.     content: '';   
  15.     position: absolute;   
  16.     top: 10px;   
  17.     left: 3px;   
  18.     width: 14px;   
  19.     height: 1px;   
  20.     background-color: #fdaa47;   
  21.     display: block;   
  22. }   
  23. /* 纵向 */    
  24. .plus:after {   
  25.     display: block;   
  26.     content: '';   
  27.     width: 1px;   
  28.     height: 14px;   
  29.     background-color: #fdaa47;   
  30.     position: absolute;   
  31.     left: 10px;   
  32.     top: 3px;   
  33. }   
  34. .opened:after {   
  35.     top: -30px;   
  36. }  

当通过addClass(‘opened’)和removeClass(‘opened’),来切换加减号时：IE8浏览器中效果没有达到预期，部分样式无法覆盖，现解决方案如下:

JavaScript Code复制内容到剪贴板
  1. class="parent">   
  2.     class="plus">   
  
  • "text/javascript">   
  • $('.parent').on('click', function() {   
  •     var $i = $(this).find('i'),   
  •         className = $i.attr('class');   
  •     className = /opened/.test(className) ? 'plus' : className +' opened';   
  •     $i.replaceWith('+ className +'"">');   
  • });   
  •   

    • 伪类和伪元素的异同
    1. W3C CSS 2.1 Selectors
    对伪类和伪元素没有做出区分，都是使用一个冒号
    比如
    伪类:

    上一篇：老生常谈CSS中的长度单位CSS控制文本的长度 超过一行显示省略号的实现方法用css控制字符串的输出长度超出时隐藏详解CSS中的几种长度px、em、ptCSS的em、px、pt长度单位转换示例

    下一篇：使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题谈谈对css属性box-sizing的了解CSS3 box-sizing属性详解css3 盒模型以及box-sizing属性全面了解CSS3属性box-sizing使用指南css3 box-sizing属性使用参考指南CSS3 box-sizing属性详解CSS3中的box-sizing（content-box与border-box）

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网