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選擇器之偽類選擇器(偽元素)