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