首页 > 网页制作 > CSS

解析CSS中的伪元素及其与伪类的区别

admin CSS 2022-02-06 16:03:30 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.     positionrelative;   
  6.     padding-left: 2em;   
  7.     line-height30px;   
  8.     list-stylenone;   
  9. }   
  10. ol>li:before {   
  11.     positionabsolute;   
  12.     top8px;   
  13.     left: 0;   
  14.     height16px;   
  15.     width16px;   
  16.     line-height16px;   
  17.     text-aligncenter;   
  18.     contentcounter(li);   
  19.     countercounter-increment: li;   
  20.     border-radius: 50%;   
  21.     background-color#ccc;   
  22.     font-size12px;   
  23.     color#efefee;   
  24. }  

PS:我们不能设置content: “

Benjamin

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

CSS Code复制内容到剪贴板
  1. "text/css">   
  2.     .list li {   
  3.         list-stylenone;   
  4.         margin-bottom20px;   
  5.     }   
  6.     .list li span {   
  7.         vertical-alignmiddle;   
  8.     }   
  9.     .list li:before {   
  10.         contentattr(index);   
  11.         displayinline-block;   
  12.         width20px;   
  13.         height20px;   
  14.         text-aligncenter;   
  15.         color#fff;   
  16.         vertical-alignmiddle;           
  17.         background-color#f00;   
  18.         border-radius: 50%;   
  19.     }   
  20.   
  21. "list">   
  22.     "1">专注前端开发和用户体验
  23.   
  24.     "2">专注前端开发和用户体验
  25.   
  26.     "3">专注前端开发和用户体验
  27.   
  28.     "4">专注前端开发和用户体验
  29.   
  30.     "5">专注前端开发和用户体验
  31.   
  32.   

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

CSS Code复制内容到剪贴板
  1. .plus {   
  2.     positionrelative;   
  3.     displayinline-block;   
  4.     vertical-aligntop;   
  5.     width20px;   
  6.     height20px;   
  7.     margin-right24px;   
  8.     border1px solid #fdaa47;   
  9.     border-radius: 3px;   
  10.     overflowhidden;   
  11. }   
  12. /* 横向 */    
  13. .plus:before {   
  14.     content'';   
  15.     positionabsolute;   
  16.     top10px;   
  17.     left3px;   
  18.     width14px;   
  19.     height1px;   
  20.     background-color#fdaa47;   
  21.     displayblock;   
  22. }   
  23. /* 纵向 */    
  24. .plus:after {   
  25.     displayblock;   
  26.     content'';   
  27.     width1px;   
  28.     height14px;   
  29.     background-color#fdaa47;   
  30.     positionabsolute;   
  31.     left10px;   
  32.     top3px;   
  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
    对伪类和伪元素没有做出区分,都是使用一个冒号
    比如
    伪类:first-child,
    伪元素:first-line
    PS:在该规范中明确提到了a链接的几种伪类的书写顺序:
    Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ‘color’ property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

    2. CSS Selectors Level 3
    该规范中为伪类和伪元素做了区分,伪类使用单冒号,伪元素开始使用双冒号。
    比如
    伪类:first-child
    伪元素::first-line、::first-letter、::before、::after
    CSS 3在CSS2.1的基础上增加了不少伪类:target、UI元素状态的伪类:checked等、结构性伪类:nth-child()等,具体可以看规范。

    3. CSS Selectors Level 4草案
    该草案中又增加了很多新的伪类,比如与input控制状态、值状态、值校验相关的伪类,树形结构的伪类,网格结构的伪类等。

    4. CSS Pseudo-Elements Module Level 4——W3C First Public Working Draft, 15 January 2015
    增加了一些伪元素,如:
    Selecting Highlighted Content: the ::selection, ::spelling-error, and ::grammar-error pseudo-elements,
    Placeholder Input: the ::placeholder pseudo-element。

    5. 常见应用
    伪类:
    1) a链接样式
    2) 隔行变色
    伪元素:
    1) 最常见的使用伪元素after清除浮动,
    .fix{*zoom:1;}
    .fix:after,.fix::after{display: block; content: “clear”; height: 0; clear: both; overflow: hidden; visibility: hidden;}
    2) letter-spacing+first-letter实现按钮文字隐藏
    3) 首行、首字母样式
     

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/CSS/77792.html

    留言与评论(共有 0 条评论)
       
    验证码:

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持