僞對象選擇符
| 選擇符 | 版本 | 描述 |
|---|---|---|
| E:first-letter/E::first-letter | CSS1/3 | 設置對象內的第一個字符的樣式。 |
| E:first-line/E::first-line | CSS1/3 | 設置對象內的第一行的樣式。 |
| E:before/E::before | CSS2/3 | 設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用 |
| E:after/E::after | CSS2/3 | 設置在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用 |
| E::placeholder | CSS3 | 設置對象文字佔位符的樣式。 |
| E::selection | CSS3 | 設置對象被選擇時的顏色。 |
:first-letter 選擇器
定義和用法
:first-letter選擇器用來指定元素第一個字母的樣式。
提示: :first-letter選擇器可以使用以下屬性：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear
注意: “first-letter” 選擇器僅適用於在塊級元素中.
選擇每個 <p>元素的第一個字母來設置樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:first-letter{
font-size:200%;
color:#8A2BE2;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
<p>PHP</p>
<p>HTML</p>
<p>CSS</p>
</div>
</body>
</html>
效果圖：
:first-line 選擇器
定義和用法
:first-line選擇器用來指定選擇器第一行的樣式。
注意: :first-line選擇器可以使用以下屬性：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
注意: “first-line” 選擇器適用於塊級元素中。
每個<p>元素的第一行選擇的樣式：
效果圖：
:before 選擇器
定義和用法
:before 選擇器向選定的元素前插入內容。
使用content 屬性來指定要插入的內容。
注意: :before在IE8中運行，必須聲明<!DOCTYPE>
每個 <p>元素之前插入內容、並設置所插入內容的樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:before{
content:"標題";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>1、測試文本！</p>
<p>2、測試文本！</p>
</div>
</body>
</html>
效果圖：
:after 選擇器
定義和用法
:after 選擇器向選定的元素之後插入內容。
使用content 屬性來指定要插入的內容。
注意:
:after在IE8中運行，必須聲明<!DOCTYPE>
在每個 <p> 元素後面插入內容，並設置所插入內容的樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p:after{
content:"- 臺詞";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
</div>
</body>
</html>
效果圖：
::placeholder選擇器
語法：
E::placeholder { sRules }
說明：
設置對象文字佔位符的樣式。
::placeholder僞元素用於控制表單輸入框佔位符的外觀，它允許開發者/設計師改變文字佔位符的樣式，默認的文字佔位符爲淺灰色。- 當表單背景色爲類似的顏色時它可能效果並不是很明顯，那麼就可以使用這個僞元素來改變文字佔位符的顏色。
- 需要注意的是，除了Firefox是
::[prefix]placeholder，其他瀏覽器都是使用::[prefix]input-placeholder Firefox支持該僞元素使用text-overflow屬性來處理溢出問題。
::placeholder的使用示例:
<input type="text" placeholder="佔位符"/>input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
input::-webkit-input-placeholder {
color: green;
}
input:-ms-input-placeholder { // IE10+
color: green;
}
input:-moz-placeholder { // Firefox4-18
color: green;
}
input::-moz-placeholder { // Firefox19+
color: green;
}
</style>
</head>
<body>
<input id="test" placeholder="Placeholder text!">
</body>
</html>
::selection 選擇器
定義和用法：
::selection選擇器匹配元素中被用戶選中或處於高亮狀態的部分。
::selection只可以::selection 選擇器應用於少數的CSS屬性：color, background, cursor,和outline
注意：
E9+, Opera, Google Chrome和Safari支持::selection選擇器
Firefox 通過其私有屬性::-moz-selection支持
CSS語法：
::selection
{
CSS聲明；
}
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
::selection
{
color:pink;
}
::-moz-selection
{
color:pink;
}
</style>
</head>
<body>
<p>將選定的文本變爲粉色</p>
</body>
</html>
效果圖：
