1. 程式人生 > >CSS選擇器之偽類選擇器(偽元素)

CSS選擇器之偽類選擇器(偽元素)

寫法 cor outline p標簽 而不是 edit 實現 after tab

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