认识css3伪元素

css3伪元素

css2的规定为单冒号表示,而css3已经明确表示伪类使用单冒号,伪元素使用双冒号,本次所有测试双冒号

对于读者阅读,有的地方显得有些冗余,但是,这是为了测试没办法了,如果写的不全面或者有错误,请您提出建议


::selection

对用户所选取的部分样式改变

浏览器支持

IE

FireFox

Chrome

Safari

Opera

Edge

360

支持

支持

支持

没测试

支持

支持

支持

IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 Firefox 支持替代的 ::-moz-selection。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ::selection{
            background-color: red;
        }
    </style>
</head>
<body>
    <article>
        ::selection元素选择器的学习,如果选中显示为红色,默认为蓝色的
    </article>
</body>
</html> 

w3cshool,css3 ::selection


::before

在元素显示内容之前进行某些样式

浏览器支持

IE

FireFox

Chrome

Safari

Opera

Edge

360

支持

支持

支持

没测试

支持

支持

支持

IE9包括9版本以上支持双冒号

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li::before{
            content: "星期";
        }
    </style>
</head>
<body>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
    </ul>
</body>
</html>

w3cshool,css :before


::after

项目中的应用

在元素显示内容之后进行某些样式内容操作

浏览器支持

IE

FireFox

Chrome

Safari

Opera

Edge

360

支持

支持

支持

没测试

支持

支持

支持

IE9包括9版本以上支持双冒号

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .sp::after{
            content: ",";
        }
    </style>
</head>
<body>
    <p>
        <span class="sp">before表示之前</span>
        <span class="sp">after表示之后</span>
        <span class="sp">这样说了和没说一样</span>
        <span >废话!</span>
    </p>
</body>
</html>

w3cshool,css :after


::first-letter

对元素内容的第一字母进行样式操作

浏览器支持

IE

FireFox

Chrome

Safari

Opera

Edge

360

支持

支持

支持

没测试

支持

支持

支持

IE9包括9版本以上支持双冒号

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p::first-letter{
            color:red;
        }
    </style>
</head>
<body>
    <p>
        CSS 伪类用于向某些选择器添加特殊的效果。<br/>
         CSS 伪元素用于将特殊的效果添加到某些选择器。

    </p>
</body>
</html>

w3cshool,css :first-letter


::first-line

对元素内容的第一行进行样式操作

浏览器支持

IE

FireFox

Chrome

Safari

Opera

Edge

360

支持

支持

支持

没测试

支持

支持

支持

IE9包括9版本以上支持双冒号

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p::first-line{
            color:red;
        }
    </style>
</head>
<body>
    <p>
        CSS 伪类用于向某些选择器添加特殊的效果。<br/>
         CSS 伪元素用于将特殊的效果添加到某些选择器。

    </p>
</body>
</html>

w3cshool,css :first-line


总结

这次只是对css3规定的双冒号进行测试,在主流浏览器上双冒号都可以实现。如果读者您想有更好的兼容性,我建议还是使用单冒号,因为从上面可以看出对于IE9以下都不兼容,但是对于这批用户也占了相当一部分。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React技巧1(状态组件与无状态组件的使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React 技巧1(状态组件与无状态组件的使用) --...

3326
来自专栏知晓程序

一个天气小程序和他们跳过的 47 个坑,你该如何避免?

1622
来自专栏AndroidTv

前端入门1-基础概念声明正文

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

832
来自专栏软件开发

CSS3与页面布局学习总结(五)——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

3336
来自专栏拂晓风起

cocos2d-js 粒子系统使用自定义图片,还原原来的图片宽高

901
来自专栏腾讯大讲堂的专栏

Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

2037
来自专栏小李刀刀的专栏

[译]CSS边框实现“无图化”设计

原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes...

3648
来自专栏知晓程序

开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!

之前做小程序开发时,需要实现对多行文本进行的折叠的效果(类型微信朋友圈)。主要交互有三点:

1715
来自专栏葡萄城控件技术团队

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位...

2609
来自专栏知晓程序

开发 | 一篇文章读懂微信小程序视图层

1192

扫码关注云+社区

领取腾讯云代金券