僞元素和僞類

原文鏈接：https://www.jianshu.com/p/4c9902b6e8de

僞元素和僞類

一、僞類

1.1 定義

css僞類：css僞類用於向某些選擇器添加特殊效果。

僞類其實與普通的css類相類似，可以爲已有的元素添加樣式，但是他只有處於dom無法描述的狀態下才能爲文檔樹中的元素添加樣式，所以將其稱爲僞類。(這種文檔樹無法描述的狀態是什麼呢？當一個元素在用戶的不同行爲下就變化成不同的狀態這個行爲的變化dom就無法描述，就要產生僞類，來爲一些選擇器添加特殊的效果)。

但是細分僞類的話，又分爲動態僞類，UI元素狀態僞類，CSS3的:nth選擇器。

動態僞類
:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標移動到鏈接上
:active 選定的鏈接
:hover 用於當用戶把鼠標移動到元素上面時的效果；
:focus 用於元素成爲焦點
對於:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被

UI元素狀態僞類
:enabled type="text可寫狀態
:disabled type="text不可狀態
:checked type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀
IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。

CSS3的:nth選擇器
:first-child 選擇某個元素的第一個子元素；
:last-child 選擇某個元素的最後一個子元素；
:nth-child() 選擇某個元素的一個或多個特定的子元素；
:nth-last-child() 選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最後一個開始計算；
:first-of-type 選擇一個上級元素下的第一個同類子元素；
:last-of-type 選擇一個上級元素的最後一個同類子元素；
:only-child 選擇的元素是它的父元素的唯一一個了元素；
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty 選擇的元素裏面沒有任何內容。

IE6-8和FF3-瀏覽器不支持":nth-child"選擇器。

1.2全部的css僞類

CSS僞類.png

1.3 僞類的常見用法

1、a標籤的僞類

a:link   /* 未訪問的鏈接 */
a:visited  /* 已訪問的鏈接 */
a:hover  /* 鼠標移動到鏈接上 */
a:active  /* 選定的鏈接 */

2、input獲取焦點 :focus

<input class="ccc" type="text" value="test" />

.ccc:focus{background-color:yellow;}

3、hover鼠標滑過

p:hover {color: #FF00FF}

一、僞元素

1.1 定義

僞元素：僞元素用於創建一些不在文檔樹中的元素，並且爲他添加樣式，舉個例子：使用僞元素‘::before’可以在一個元素前邊增加一些文本，並且可以爲這些文本添加一些樣式，雖然用戶可以看到這寫文本，但是這些文本是不存在於文檔樹中的。

1.2 幾種常見僞元素

1）:frist-letter用於向文本中的第一個字母添加樣式
2）:first-line向文本的首行添加樣式
3）:before在元素之前添加內容
4）:after在元素之後添加內容
5）::selection：匹配選中部分的內容。可用的CSS屬性爲background,color。

1.3 僞元素和僞類的對比

（1）僞類和僞元素的最大區別就在於有沒有創建一個文檔樹以外的元素。僞元素創建了一個文檔樹以外的元素（虛擬容器）併爲他添加樣式，這個容器不包含任何DOM元素但是可以包含內容。換句話說僞類和僞元素的區別就是僞類的操作對象是文檔樹中已有的元素，而僞元素則創建了一個文檔樹以外的元素。

（2）僞類使用的是單冒號，但是在css3中規定僞元素使用的雙冒號，但是除了少部分的僞元素必須使用雙冒號以外，像after還有before都是支持單引號的。爲了兼容性所以目前還是在使用一些常見的僞元素的時候採用單冒號較爲穩妥

1.4 僞元素的content屬性

僞元素的content屬性，不僅僅可以簡單直接的設置一個字符串作爲僞元素的內容，它還具備一定限度的編程能力，如下

div::after{
    content: "普通字符串";
    content: attr(父元素的html屬性名稱);
    content: url(圖片、音頻、視頻等資源的url);
    /* 使用unicode字符集，採用4位16進制編碼
     * 但不同的瀏覽器顯示存在差異，而且移動端識別度更差
     */
    content: "\21e0";
    /* content的多個值可以任意組合，各部分通過空格分隔 */
    content: "'" attr(title) "'";
<span class="token comment">/* 自增計數器，用於插入數字/字母/羅馬數字編號
 * counter-reset: [&lt;identifier&gt; &lt;integer&gt;?]+，必選，用於標識自增計數器的作用範圍，&lt;identifier&gt;爲自定義名稱，&lt;integer&gt;爲起始編號默認爲0。
 * counter-increment: [&lt;identifier&gt; &lt;integer&gt;?]+，用於標識計數器與實際關聯的範圍，&lt;identifier&gt;爲counter-reset中的自定義名稱，&lt;integer&gt;爲步長默認爲1。
 * &lt;list-style-type&gt;: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
 */</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>&lt;identifier&gt;<span class="token punctuation">,</span> &lt;list-style-type&gt;<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* 以父附屬元素的qutoes值作爲content的值
 */</span>
<span class="token property">content</span><span class="token punctuation">:</span> open-quote | close-quote | no-open-quote | no-close-quote<span class="token punctuation">;</span>

}
/* Content接受6種類型，和一種組合方式 */

1.4 常見的僞元素的用法

1、清除浮動

.clear:after{
    display:block;
    content:""; 
    height:0;
    clear: both;
    overflow:hidden; 
    visibility:hidden;
}

2、切割線

<style>
        * {
          padding: 0;
          margin: 0;
        }
        .spliter::before, .spliter::after {
          content: '';
          display: inline-block;
          border-top: 1px solid black;
          width: 200px;
          margin: 5px;
        }
      </style>
      <p class="spliter">分割線</p>

切割線

3、對話框小箭頭

    <style>
    .arrow-right{
        margin: 500px auto;
        width:300px;
        height:80px;
        background-color: pink;
        padding-left: 20px;
    }
.arrow-right:before{
    background-color: pink;
    content: "";
    display: block;
    width: 0;
    height: 0;  
    border-top: 10px solid #fff;
    border-bottom: 10px solid #fff;
    border-left: 20px solid pink;
    position: relative;
    top:14px;
    left: 300px;
}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>arrow-right<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>一起開黑吧？<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

消息框

4、水印

    <style>
        .article{
            position: relative;
            padding-bottom: 30px;
        }
    .article:after{
        position: absolute;
        content:'範小飯';
        display:block;
        width: inherit;
        font-size:16px;
        text-align: center;
        color:rgba(247, 47, 47, 0.5);
        opacity: 0.5;
        bottom: 0;
        right: 0;
    }
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>article<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Hi,一起吃飯吧？<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

水印