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