一、偽元素與偽類

1. 常見的偽類

:active      <!--向被激活的屬性添加樣式-->
:hover       <!--當鼠標懸浮于元素上方時，向元素添加樣式-->
:link        <!--向未被訪問的鏈接添加樣式-->
:visited     <!--想已被訪問的鏈接添加樣式-->
etc.

2. 偽元素

::before       <!--在元素之前添加內容-->
::after        <!--在元素之后添加內容-->
::first-letter <!--向文本的第一個字母添加特殊樣式-->
::first-line   <!--向文本的首行添加特殊樣式-->
::selection    <!--向選中的內容添加樣式-->

二、偽元素（這里只說::before和::after）

1. 了解

• 創(chuàng)建一個虛假元素插入到元素的前或者后
• 它不在文檔流中，無法使用正常的DOM操作；
• 它可以用css去操控
• 在技術上來說，與添加一個span標簽等價
• :before/:after寫法也可以被瀏覽器解析，但是為了區(qū)別于偽類，還是建議用兩個冒號書寫
• 注意：因為其很難使用DOM操作，所以需要交互的部分不要使用偽元素去生成

2. ::before/::after基本語法

• css樣式中必須加入content屬性

• content屬性以表示該偽元素中的內容；若無內容則用空字符串表示

    .p1::before{
        content: "我是一個:before";
    }
    .p1::after{
        content: "我是一個:after";
    }
  

3. 效果分析

• 可以看到偽元素效果在技術上與span等價

• 偽元素在瀏覽器檢解析中的位置是在父元素內容的前后
  

  
  
  
  

    *{
        margin: 0;
        padding: 0;
    }
    .p1::before{
        content: "我是一個:before";
        background-color: skyblue;
    }
    .p1::after{
        content: "我是一個:after";
        background-color: skyblue;
    }
    span{
        background-color: skyblue;
    }
    p{
        width: 400px;
        background-color: pink;
        text-align: center;
    }
    
    <!--html-->
    
    <p class="p1">我是一個p1</p>
    <p class="p2">
        <span>我是一個:before</span>我是一個p2<span>我是一個:after</span>
    </p>
  

4. 再來個例子

• 偽元素常配合定位來生成父級的某些附加部分，如下圖米奇的耳朵

  
  
  
  

    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        border: 2px solid black;
        border-radius: 50%;
        position: relative;
        left: 200px;
        top: 200px;
    }
    div::before{
        content: "";
        width: 40px;
        height: 40px;
        background-color: black;
        border-radius: 50%;
        position: absolute;
        left: -14px;
        top: -24px;
    }
    div::after{
        content: "";
        width: 40px;
        height: 40px;
        background-color: black;
        border-radius: 50%;
        position: absolute;
        left: 74px;
        top: -24px;
    }
    
    <!--html部分-->
    
    <div class="head"></div>