細數最新的CSS僞元素及其用法

引言

CSS 中有兩個很常見的概念，僞類和僞元素。

僞類用於在頁面中的元素處於某個狀態時，爲其添加指定的樣式。

僞元素會建立一個抽象的僞元素，這個元素不是 DOM 中的真實元素，可是會存在於最終的渲染樹中，咱們能夠爲其添加樣式。

最常規的區分僞類和僞元素的方法是：實現僞類的效果能夠經過添加類來實現，可是想要實現僞元素的等價效果只能建立實際的 DOM 節點。

此外，僞類是使用單冒號:，僞元素使用是雙冒號::。

僞元素能夠分爲排版僞元素、突出顯示僞元素、樹中僞元素三類。下面咱們一塊兒看看具體都有哪些吧。

本文主要介紹CSS Pseudo-Elements Module Level 4涉及的僞元素，由於該標準仍處於草案階段，因此會存在變更的可能。本文旨在帶你們瞭解有哪些如今以及未來可用的僞類。有興趣的能夠持續跟進。

第一類：排版僞元素

1. ::first-line僞元素

這個僞元素你們應該很熟悉，由於早在 CSS2.1 中就存在了。它表示所屬源元素的第一格式化行。能夠定義這一行的樣式。

以下面的 CSS 和 HTML 代碼，其對應的效果如圖所示。

p::first-line {
    text-transform: uppercase;
  }
複製代碼

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt. Odio, eligendi placeat.</p>
複製代碼

首行僞元素的基礎效果

第一格式化行被截斷的位置與元素的寬度、字體大小等不少因素有關，本文的截圖均只爲了展現效果而截取的。

雖然在 DOM 中看不到，但實際上，上面的這段 HTML 代碼會經過添加虛擬標籤的方式進行修改。以下：

<p><p::first-line>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p::first-line> Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt. Odio, eligendi placeat.</p>
複製代碼

若是::first-line僞元素的應用會截斷真實的元素，這個時候會在截斷的位置前先閉合標籤，在截斷位置以後再從新添加開標籤。對好比下兩段代碼：

<!-- 無僞元素 -->
  <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt.</span> Odio, eligendi placeat.</p>
複製代碼<!-- 有僞元素 --> <p><p::first-line><span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></p::first-line><span> Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt.</span> Odio, eligendi placeat.</p> 複製代碼

1.1 如何肯定第一格式化行

須要注意的是，::first-line僞元素只有應用在塊級容器上纔有效，且必須出如今相同流中的塊級子孫元素中（即沒有定位和浮動）。

以下所示，DIV 的首行就是 P 元素的首行

<div>
    <p>Lorem ipsum</p> dolor sit amet consectetur adipisicing elit. Omnis asperiores voluptatem sit ipsa ex fugit provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste!
  </div>
複製代碼<!-- 等價抽象代碼 --> <div> <p><div::first-line>Lorem ipsum</div::first-line></p> dolor sit amet consectetur adipisicing elit. Omnis asperiores voluptatem sit ipsa ex fugit provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste! </div> 複製代碼

內嵌塊級元素的首行效果

若是 display 值爲table-cell和inline-block的元素的內容，不能做爲祖先元素的第一格式化行內容。

以下所示，若是將上面 HTML 代碼中 p 標籤改成display: inline-block，則其不會應用首行效果。

以下所示，能夠看出 Lorem ipsum 仍爲小寫：

<div>
    <p style="display: inline-block;">Lorem ipsum</p> dolor sit amet consectetur adipisicing elit. Omnis asperiores voluptatem sit ipsa ex fugit
    provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste!
  </div>
複製代碼<!-- 等價抽象代碼 --> <div> <p style="display: inline-block;">Lorem ipsum</p><div::first-line> dolor sit amet consectetur adipisicing elit. Omnis</div::first-line> asperiores voluptatem sit ipsa ex fugit provident tenetur eum pariatur impedit cumque corrupti iste expedita, esse nulla ad et excepturi. Iste! </div> 複製代碼

內嵌非塊級元素的首行效果

1.2 能夠用於::first-line僞元素的樣式

::first-line生成的僞元素的行爲相似於一個行級元素，還有一些其餘限制。主要有如下樣式能夠應用於其上：

• 全部的字體屬性
• color和 opacity屬性
• 全部的背景屬性
• 能夠應用於行級元素的排版屬性
• 文字裝飾屬性
• 能夠用於行級元素的行佈局屬性
• 其餘一些規範中特別指定能夠應用的屬性

此外，瀏覽器廠商有可能額外應用其餘屬性。

2. ::first-letter僞元素

::first-letter僞元素表明所屬源元素的第一格式化行的第一個排版字符單元，且其前面不能有任何其餘內容。

::first-letter經常使用於下沉首字母效果。

以下，咱們能夠建立一個下沉兩行的段落。第一種方法，是CSS-INLINE-3中引入的，瀏覽器尚不支持。咱們能夠經過第二種方法實現一樣的效果。

<p>「Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos hic vero reprehenderit sunt temporibus?
    Doloribus consequatur quo illo porro quae recusandae autem eos. Corrupti itaque alias nam eius animi illum.</p>
複製代碼

<!-- initial-letter(尚不支持) -->
  p::first-letter { initial-letter: 2; }
複製代碼<!-- 普通實現 --> h3 + p::first-letter { float: left; display: inline-block; font-size: 32px; padding: 10px 15px; } 複製代碼

首字母下沉效果

注意，第一個排版字符單元前的標點符號（能夠是多個標點符號）也要包含在::first-letter僞元素內。CSS3 TEXT中規定，一個排版字符單元能夠包含超過一個的 Unicode 碼點。不一樣的語言也能夠有額外的規則決定如何處理。

若是將要放入::first-letter僞元素的字符不在同一個元素中，如<p>「<em>L中的"L，瀏覽器能夠選擇一個元素建立僞元素，也能夠兩個都建立，或者都不建立。

在 chrome 下效果以下，仍是挺奇怪的。因此儘可能避免該狀況。

僞元素中的字符不在同一個元素內

此外，若是塊元素的首字母不在行首（如因爲雙向從新排序），則瀏覽器不須要建立僞元素。

2.1 如何肯定首字母

首字母必須出如今第一格式化行內。

以下所示，將b標籤改成display: inline-block;，則其不會出如今第一格式化行內，因此首字母無效果。

<p>「<b style="display: inline-block;">Lorem</b>」 ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos hic vero reprehenderit sunt temporibus?
    Doloribus consequatur quo illo porro quae recusandae autem eos. Corrupti itaque alias nam eius animi illum.</p>
複製代碼

首字母不在首行內無效果

目前，::first-letter只可用於塊級元素，將來可能會容許應用到更多的display類型中。

僞元素的虛擬標籤應當緊跟在首字母以前，哪怕這個首字母是在子孫元素，這一點和::first-line相似。

以下例，首字母首字母在子孫元素中，首字母的並無加粗，由於僞元素是添加到 span 標籤內部的，因此字重是正常的。

p { line-height: 1.1 }
  p::first-letter { font-size: 2em; font-weight: normal }
  span { font-weight: bold }
複製代碼

<p><span>Lorem ipsum</span> dolor sit amet consectetur adipisicing elit. Magni possimus rerum eaque architecto, adipisci neque odio, recusandae sapiente placeat ullam velit ratione esse aut expedita quae earum. Velit, dignissimos accusamus?</p>
複製代碼

首字母在子孫元素的樣式覆蓋

若是元素有::before或者::after，則::first-letter僞元素也能夠應用到其content值中。

若是元素是列表項（即display: list-item），則首字母會應用在標記符號後面。以下圖：

列表項的首字母

若是列表項的顯示位置在內部（即list-style-position: inside），瀏覽器能夠選擇忽略::first-letter僞元素。

2.2 能夠用於::first-letter僞元素的樣式

::first-line生成的僞元素的行爲相似於一個行級元素，還有一些其餘限制。主要有如下樣式能夠應用於其上：

• 全部的字體屬性
• color和 opacity屬性
• 全部的背景屬性
• 能夠應用於行級元素的排版屬性
• 文字裝飾屬性
• 能夠用於行級元素的行佈局屬性
• margin和 padding屬性
• border和 box-shadow
• 其餘一些規範中特別指定能夠應用的屬性

一樣，瀏覽器廠商有可能額外應用其餘屬性。

第二類：突出顯示僞元素

突出顯示僞元素表示文檔中特定狀態的部分，一般採用不一樣的樣式展現該狀態。如頁面內容的選中。

突出顯示僞元素不須要在元素樹中有體現，而且能夠任意跨越元素邊界而不考慮其嵌套結構。

突出顯示僞元素主要有如下幾類：

1. ::selection與 ::inactive-selection

這兩個僞元素表示用戶在文檔中選取的內容。::selection表示有效的選擇，相反，::inactive-selection表示無效的選擇（如當窗口無效，沒法相應選中事件時）

以下圖所示，咱們能夠定義頁面中選中內容的樣式，輸入框中的內容也能夠。

選中高亮樣式

請原諒我也沒法觸發::inactive-selection。你們知道它是幹啥的就好了。

2. ::spelling-error

::spelling-error表示瀏覽器識別爲拼寫錯誤的文本部分。暫無實現。

3. ::grammar-error

::grammar-error表示瀏覽器識別爲語法錯誤的文本部分。暫無實現。

::spelling-error和::grammar-error暫時均無實現。一方面，不一樣的語言的語法與拼寫較爲複雜。另外一方面，::spelling-error和::grammar-error還可能會致使用戶隱私的泄露，如用戶名和地址等。因此瀏覽器實現必須避免讀取這類突出顯示內容的樣式。

能夠應用到突出顯示類僞元素的樣式

對於突出顯示類僞元素，咱們只能夠應用不影響佈局的屬性。以下：

• color
• background-color
• cursor
• caret-color
• caret-color
• text-decoration及其相關屬性
• text-shadow
• stroke-color/ fill-color/ stroke-width

草案中對這裏能夠應用的屬性還有待確認，因此會存在必定的增減。現階段，也只有 color 和 background 獲得了支持。

第三類：存在於元素樹中的僞元素：樹中僞元素

這類僞元素會一直存在於元素樹中，它們聚集成源元素的任何屬性。

1. 內容生成僞元素：::before/::after

當::before/::after僞元素的content屬性不爲'none'時，這兩類僞元素就會生成一個元素，做爲源元素的子元素，能夠和 DOM 樹中的元素同樣定義樣式。

::before是在源元素的實際內容前添加僞元素。::after是在源元素的實際內容後添加僞元素。

正如上文提到的，與常規的元素同樣，::before和::after兩個僞元素能夠包含::first-line和::first-letter。

2. 列表項標記僞元素：::marker

::markder能夠用於定義列表項標記的樣式。

以下，咱們能夠分開定義列表項及其內容的顏色。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
複製代碼

li{
      color: red;
    }
    li::marker {
      color:green;
    }
複製代碼

自定義列表項標記顏色

該僞元素暫時只有 safari 支持，嘗試的話請使用 safari。能夠用於該僞元素的屬性也有限，包括全部字體樣式、color以及text-combine-upright，有待之後擴充。

3. 輸入框佔位僞元素：::placeholder

::placeholder表示輸入框內佔位提示文字。能夠定義其樣式。

如：

::placeholder {
    color: blue;
  }
複製代碼

輸入框佔位僞元素樣式

**全部能夠應用到::first-line僞元素的樣式均可以用於::placeholder上。**能夠參考上面的內容。

注意還有一個:placeholder-shown僞類，它主要用於定義顯示了佔位文字的元元素自己的樣式，而不是佔位文字的樣式。

總結

本文列舉了CSS Pseudo-Elements Module Level 4中的全部僞元素類型。

首先，詳細介紹了排版類僞元素，這一類你們的使用場景較多，支持度也較好。

其次，介紹了突出顯示類僞元素，主要能夠用於選中樣式的修改，其餘的還沒有獲得支持。

最後，介紹了樹中僞元素，包括::before/::after/::marker/::placeholder

雖然有些僞元素沒有獲得支持，或者能夠應用的屬性優先，可是 CSS 工做中正在進行必定的擴展。有興趣的同窗們能夠持續關注。

CSS Pseudo-Elements Module Level 4：https://www.w3.org/TR/2019/WD-css-pseudo-4-20190225/#window-interface。

---

若是你喜歡，歡迎掃碼關注個人公衆號，我會按期雲陪讀，並分享一些其餘的前端知識喲。