PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

CSS中的伪元素及其与伪类的区别示例介绍

高洛峰
高洛峰 原创
2017-03-08 14:30:45 1250浏览

伪元素

我们知道随着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出现之前,对于设置列表序号样式比较有用;具体参见下面代码:

ol {   
    countercounter-reset: li;   
}   
ol>li {   
    position: relative;   
    padding-left: 2em;   
    line-height: 30px;   
    list-style: none;   
}   
ol>li:before {   
    position: absolute;   
    top: 8px;   
    left: 0;   
    height: 16px;   
    width: 16px;   
    line-height: 16px;   
    text-align: center;   
    content: counter(li);   
    countercounter-increment: li;   
    border-radius: 50%;   
    background-color: #ccc;   
    font-size: 12px;   
    color: #efefee;   
}

PS:我们不能设置content: “

Benjamin

”,它不会解析按HTML代码片段解析,而会解析为字符串;
5. content: attr(attrName)
content可以利用attr函数获取属性值,尤其使用在伪类中比较方便。见如下代码:
<style type="text/css">   
    .list li {   
        list-style: none;   
        margin-bottom: 20px;   
    }   
    .list li span {   
        vertical-align: middle;   
    }   
    .list li:before {   
        content: attr(data-index);   
        display: inline-block;   
        width: 20px;   
        height: 20px;   
        text-align: center;   
        color: #fff;   
        vertical-align: middle;           
        background-color: #f00;   
        border-radius: 50%;   
    }   
</style>   
<ul class="list">   
    <li data-index="1"><span>专注前端开发和用户体验</span></li>   
    <li data-index="2"><span>专注前端开发和用户体验</span></li>   
    <li data-index="3"><span>专注前端开发和用户体验</span></li>   
    <li data-index="4"><span>专注前端开发和用户体验</span></li>   
    <li data-index="5"><span>专注前端开发和用户体验</span></li>   
</ul>

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

.plus {   
    position: relative;   
    display: inline-block;   
    vertical-align: top;   
    width: 20px;   
    height: 20px;   
    margin-right: 24px;   
    border: 1px solid #fdaa47;   
    border-radius: 3px;   
    overflow: hidden;   
}   
/* 横向 */
.plus:before {   
    content: &#39;&#39;;   
    position: absolute;   
    top: 10px;   
    left: 3px;   
    width: 14px;   
    height: 1px;   
    background-color: #fdaa47;   
    display: block;   
}   
/* 纵向 */
.plus:after {   
    display: block;   
    content: &#39;&#39;;   
    width: 1px;   
    height: 14px;   
    background-color: #fdaa47;   
    position: absolute;   
    left: 10px;   
    top: 3px;   
}   
.opened:after {   
    top: -30px;   
}

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

<p class="parent">   
    <i class="plus"></i>   
</p>   
<script type="text/javascript">   
$(&#39;.parent&#39;).on(&#39;click&#39;, function() {   
    var $i = $(this).find(&#39;i&#39;),   
        className = $i.attr(&#39;class&#39;);   
    className = /opened/.test(className) ? &#39;plus&#39; : className +&#39; opened&#39;;   
    $i.replaceWith(&#39;<i class="&#39;+ className +&#39;""></i>&#39;);   
});   
</script>

伪类和伪元素的异同
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) 首行、首字母样式
 

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。