css3伪元素

css3伪元素

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

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

  • css3伪元素
    • selection
      • 浏览器支持
      • 代码示例
    • before
      • 浏览器支持
      • 代码示例
    • after
      • 浏览器支持
      • 代码示例
    • first-letter
      • 浏览器支持
      • 代码示例
    • first-line
      • 浏览器支持
      • 代码示例
    • 总结

::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以下都不兼容,但是对于这批用户也占了相当一部分。

你可能感兴趣的:(css,浏览器,测试,css3,阅读)