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以下都不兼容，但是對于這批用戶也占了相當一部分。
