认识css3伪元素

css3伪元素

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

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

---

::selection

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

浏览器支持

IE	FireFox	Chrome	Safari	Opera	Edge	360
支持	支持	支持	没测试	支持	支持	支持

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

代码示例

    
    
    


    

        ::selection元素选择器的学习,如果选中显示为红色，默认为蓝色的
    

 

w3cshool,css3 ::selection

---

::before

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

浏览器支持

IE	FireFox	Chrome	Safari	Opera	Edge	360
支持	支持	支持	没测试	支持	支持	支持

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

代码示例

    
    
    


    

        
一
        
二
        
三
        
四
        
五
    

w3cshool,css :before

---

::after

项目中的应用

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

浏览器支持

IE	FireFox	Chrome	Safari	Opera	Edge	360
支持	支持	支持	没测试	支持	支持	支持

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

代码示例

    
    
    


    

        before表示之前
        after表示之后
        这样说了和没说一样
        废话！
    

w3cshool,css :after

---

::first-letter

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

浏览器支持

IE	FireFox	Chrome	Safari	Opera	Edge	360
支持	支持	支持	没测试	支持	支持	支持

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

代码示例

    
    
    


    

        CSS 伪类用于向某些选择器添加特殊的效果。

         CSS 伪元素用于将特殊的效果添加到某些选择器。

    

w3cshool,css :first-letter

---

::first-line

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

浏览器支持

IE	FireFox	Chrome	Safari	Opera	Edge	360
支持	支持	支持	没测试	支持	支持	支持

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

代码示例

    
    
    


    

        CSS 伪类用于向某些选择器添加特殊的效果。

         CSS 伪元素用于将特殊的效果添加到某些选择器。

    

w3cshool,css :first-line

---

总结

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