我終於理解了僞類和僞元素

僞類和僞元素，對於絕大多數同窗來講，都是耳熟能詳的名字，但確實又有不少人搞不清楚它們之間的區別，以至於混淆概念。而當概念都混淆的時候，也每每意味着你不會常常使用它，怕出錯，怕用很差。而這也會大大影響你的效率，原本幾行代碼就能夠完成的工做，卻要寫上一大堆......因此，花點時間理清楚每個看似微小的概念，會讓咱們的編程更有效率。下面進入正題。

僞類和僞元素的區別，其實很簡單，從字面上就能夠理解。它們有一個共同的修飾詞「僞」，那麼「僞」是什麼意思呢？就是假的唄。因此，僞類就是假的類，僞元素就是假的元素，這就是在字面上它們之間的區別。下面咱們再從定義上感覺一下。

1.僞類

CSS3給出的定義是：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大體翻譯過來的意思就是：僞類存在的意義是爲了經過選擇器，格式化DOM樹之外的信息以及不能被常規CSS選擇器獲取到的信息。

經過上面的概念咱們知道了僞類的功能有兩種：

1.格式化DOM樹之外的信息。好比：<a>標籤的:link、:visited等。這些信息不存在於DOM樹中。

2.不能被常規CSS選擇器獲取到的信息。好比：要獲取第一個子元素，咱們沒法用常規的CSS選擇器獲取，但能夠經過:first-child來獲取到。

2.僞元素

CSS3給出的定義以下：

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

大體翻譯過來的意思就是：僞元素能夠建立一些文檔語言沒法建立的虛擬元素。好比：文檔語言沒有一種機制能夠描述元素內容的第一個字母或第一行，但僞元素能夠作到(::first-letter、::first-line)。同時，僞元素還能夠建立源文檔不存在的內容，好比使用::before 或 ::after。

3.僞類和僞元素的區別（CSS3下的區別）

經過上面的概念，咱們就能夠知道僞類與僞元素最本質的一個區別：

僞類實際上是彌補了CSS選擇器的不足，用來更方便地獲取信息；

HTML:

<ul>
    <li>11111</li>
    <li>22222</li>
</ul>

CSS：

li:first-child {
    color: red;   
}
// 選擇器不能直接選取第一個子元素
// 僞類彌補了選擇器的不足

而僞元素本質上是建立了一個虛擬容器(元素)，咱們能夠在其中添加內容或樣式。

HTML：

<p>
    <span class="first-letter">H</span>ello, World
</p>

CSS：

.first-letter {
  color: red;
}

上面的代碼其實就是：

p::first-letter {
  color: red;
}

因此，你能夠理解僞元素本質上是建立了一個虛擬容器(元素)了吧。

除了上面這個本質區別之外，在CSS3中，僞類用單冒號:表示；而僞元素用雙冒號::表示。一個選擇器能夠同時使用多個僞類(但有的僞類會互斥)；而一個選擇器只能同時使用一個僞元素(將來的版本可能會支持多僞元素)。

4.主要用法

4.1僞類

1 :first-child

匹配第一個子元素。

HTML：

<ul>
    <li>111</li>
    <li>222</li>
</ul>

CSS：

li:first-child {
  color: red; // 第一個 li 會變紅
}

2 :last-child

匹配最後一個子元素。

HTML：

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

CSS：

li:last-child {
  color:red; // 最後一個 li 會變紅
}

3 :first-of-type

匹配屬於其父元素的第一個特定類型的子元素。

HTML：

<div>
    <h1>h1文本</h1>
      <p>p文本</p>
</div>

CSS：

p:first-of-type {
  color: red;  // <p>標籤的內容變爲紅色
}

這裏有必要強調一下:first-child與:first-of-type的區別。若是你的CSS寫成:

p:first-child {
  color:red;
}

頁面是不會有變化的，由於<p>元素並非父元素<div>的第一個子元素。

4 :last-of-type

匹配屬於其父元素的最後一個特定類型的子元素。

HTML：

<div>
    <h1>h1文本</h1>
    <h1>h1文本2</h1>
    <p>p文本</p>
</div>

CSS：

h1:last-of-type {
  color: red;  // 倒數第一個<h1>標籤的內容變爲紅色(h1文本2)
}

4.2 僞元素

1 ::before

在被選元素以前插入內容。須要指定content屬性來插入內容。

HTML：

<p>CSS</p>

CSS：

p::before {
  content: "Hi,";
}

2 ::after

在被選元素以後插入內容。須要指定content屬性來插入內容。

HTML：

<p>Hi, </p>

CSS：

p::after {
  content: "CSS";
}

3 ::first-letter

匹配元素中文本的首字母。

HTML：

<p>我在學僞元素</p>

注意：試試把<p>標籤改爲<p>???我在學僞元素</p>，你會發現頗有意思的現象。

CSS：

p::first-letter {
  font-size: 32px;
}

4 ::first-line

匹配元素中第一行的文本(只能在塊元素中使用)。

HTML：

<p>我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素</p>

CSS：

p::first-line {
  color: red;
}

5 ::selection

匹配被用戶選中的部分。

HTML：

<p>我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素,我在學僞元素</p>

CSS：

p::selection {
  color: red;
}

最後的最後，我說的不必定都對，你必定要本身試試！

(本文完)