CSS選擇器之偽類選擇器（偽元素）
|
selection |
[CSS4]應用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。（IE8及以下不支持）（火狐-moz-selection） |
|
first-line |
選擇每個 <p> 元素的首行，並為其設置樣式。 |
|
first-letter |
選擇每個 <p> 元素的首字母，並為其設置樣式。 |
|
before |
在每個 <p> 元素的內容之前插入新內容。 |
|
after |
在每個 <p> 元素的內容之後插入新內容。 |
|
cue |
|
|
backdrop |
|
|
placeholder |
|
|
marker |
|
|
spelling-error |
|
|
grammar-error |
|
與偽類一樣， 偽元素添加到選擇器，但不是描述特殊狀態，它們允許您為元素的某些部分設置樣式。有時你會發現偽元素使用了兩個冒號 (::) 而不是一個冒號 (:). 這是CSS3的一部分，並嘗試區分偽類和偽元素. 大多數瀏覽器都支持這兩個值。
若頁面只需要兼容 webkit、firefox、opera 等瀏覽器，建議對於偽元素采用雙冒號的寫法，如果不得不兼容 IE 瀏覽器，還是用 CSS2 的單冒號寫法比較安全。
所有偽元素能實現的，真實子元素都可以做到。只不過有時候單純是為了樣式和布局就改變html結構，這樣的做法不幹凈，不值得提倡，所以才有了偽元素的市場。我用偽元素繪制過打印機，拆開一半的信封等，也用它實現過非規整圖片輪廓。不過這些真實子元素同樣可以做到，只不過沒有做到內容結構與樣式分離而已。
註意：沒法通過DOM操作直接操作偽元素。
1.1 各偽元素功能
selection偽元素應用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。
只有一小部分CSS屬性可以用於::selection 選擇器： color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。要特別註意的是，background-image 會如同其他屬性一樣被忽略。
註意：::selection中的text-shadow屬性僅有Chrome, Safari 和 Firefox 17+支持。
如下列所示：
|
<!DOCTYPE html> <html lang="en"> <head> <style> ::-moz-selection { color: gold; background: red; } ::selection { color: gold; background: red; } p::-moz-selection { color: white; background: black; } p::selection { color: white; background: black; } </style> </head> <body> <div class="textarea" contenteditable="true"><br /></div> <div>提供::selection 偽元素選擇器測試的文本</div> <p>也嘗試選中在這個p標簽中的文本</p> </body> </html> |
在頁面中選擇p和div標簽的文本時，選中的文本將分別應用style中設置的樣式。
CSS選擇器之偽類選擇器（偽元素）