之前介紹了8種選擇器,基本上可以應(yīng)對大部分的開發(fā)需求，但是如果不會(huì)使用偽類和偽元素，就跟下面的圖差不多，后面會(huì)摔的。偽元素和偽類雖然不是特別常用，但是，很好用，可以幫你省掉很多無用功，效果還好。下面直接進(jìn)入正題，盡量用最小的篇幅讓人明白如何使用它們。

1.偽元素和偽類的區(qū)別

偽元素和偽類都是為了給一些特殊需求加樣式，定義上基本一致。
偽類像類選擇器一樣給已存在某個(gè)元素添加額外的樣式；偽元素則是給自己虛擬的元素添加樣式。
已存在元素是指DOM中存在的，偽元素則是虛擬的一種，樣式也是給這個(gè)虛擬的元素使用的。比如虛擬一個(gè)div
聲明不同，偽類和選擇器之間用一個(gè)冒號(hào)隔開，偽元素則是兩個(gè)冒號(hào)隔.

2.常用的偽類

常用的偽類有兩類UI偽類和結(jié)構(gòu)偽類。這里只介紹5個(gè)，應(yīng)該足夠用了。

2.1.hover和active

這兩個(gè)屬于UI偽類（link/visited/active/hover）四個(gè)中的其中兩個(gè)，hover指當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)觸發(fā)某種樣式；activate指鼠標(biāo)按下時(shí)的某種樣式。
hover使用場景：一些可點(diǎn)擊的列表，表格行，卡片等，鼠標(biāo)放上去之后背景顏色會(huì)發(fā)生變化，就可以使用hover。
active使用場景：按鈕按下，圖片按下以及一些可點(diǎn)擊元素或者組件等的按下操作樣式改變。
下面是一個(gè)非常簡單的按鈕案例（在線MP4轉(zhuǎn)GIF不知道這個(gè)圖能存在多久，看不見的底下評(píng)論提醒我）：

按鈕的hover和active

第一個(gè)按鈕當(dāng)鼠標(biāo)放上去是改變邊框和字體顏色，第二則是在鼠標(biāo)按下的時(shí)候改變背景和顏色。具體代碼如下

    .btn{
        height: 34px;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 15px;
        color: rgba(0,0,0,.65);
        font-weight: 400;
        outline: none;
        border: 1px solid #cbcbcb;
    }
    .btn:hover{
        border-color: #3385ff;
        color: #3385ff;
    }
    
    .btn2{
        height: 34px;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 15px;
        color: #fff;
        background: #3385ff;
        border-width: 0;
        font-weight: 400;
        outline: none;
    }
    .btn2:active{
        border: 1px solid #3385ff;
        color: #3385ff;
        background: #fff;
    }

HTML：

    <div>
        <button class="btn">按鈕</button>
        <button class="btn2">按鈕</button>
    </div>

使用非常簡單，就是在類選擇器后面使用一個(gè)冒號(hào)后面根據(jù)需求是鼠標(biāo)放上去時(shí)觸發(fā)還是按下時(shí)觸發(fā)決定使用哪一個(gè)偽類。如上面第一個(gè)btn是( .btn:hover ) 第二個(gè)則是( .btn2:active )。

2.2.first-child last-child nth-child(n/odd/even)

這三個(gè)屬于結(jié)構(gòu)偽類，常用來給表格或者列表添加樣式。

假設(shè)父元素是一個(gè)div，使用樣式class=‘box’；
那么當(dāng)定義.box:first-child或者.box:last-child時(shí)分別是指給div的第一個(gè)或者最后一個(gè)子元素添加樣式。
nth-child這個(gè)就比較牛掰了，參數(shù)是一個(gè)數(shù)值代表給第幾個(gè)元素添加樣式，如果是odd標(biāo)示給元素為奇數(shù)的添加樣式，even則是給是偶數(shù)的元素添加樣式。
看個(gè)例子，首行添加灰色背景,其他奇數(shù)行橙色背景的一個(gè)表格

表格

css(簡單不):

    td,th {
        padding: 12px;
    }
    
    table tr:nth-child(odd){
        background: #ffab00;
    }
    
    table tr:first-child{
        background: #ccc;
    }

html(也很簡單都是重復(fù)的):

     <table border="1" frame="box" rules="all" width="50%">
        <tr>
            <th>標(biāo)題1</th>
            <th>標(biāo)題2</th>
            <th>標(biāo)題3</th>
            <th>標(biāo)題4</th>
        </tr>
        <tr>
            <td>content-1</td>
            <td>content-1</td>
            <td>content-1</td>
            <td>content-1</td>
        </tr>
        <tr>
            <td>content-2</td>
            <td>content-2</td>
            <td>content-2</td>
            <td>content-2</td>
        </tr>
        <tr>
            <td>content-3</td>
            <td>content-3</td>
            <td>content-3</td>
            <td>content-3</td>
        </tr>
        <tr>
            <td>content-4</td>
            <td>content-4</td>
            <td>content-4</td>
            <td>content-4</td>
        </tr>
        <tr>
            <td>content-5</td>
            <td>content-5</td>
            <td>content-5</td>
            <td>content-5</td>
        </tr>
     </table>

3.常用偽元素

before 和 after是經(jīng)常經(jīng)常重用的偽元素。我們直接看兩個(gè)最簡單的例子。再一句話的前面(before)和后面(after)分別添加一個(gè)圓形和一個(gè)矩形。

簡單樣例

    <p class="eazy">我就是那句話!</p>

css:

    .eazy{
        font-size: 18px;
    }
    
    .eazy::before{
        content:'';
        display: inline-block;
        width: 10px;
        height:10px;
        background: #ffab00;
        border-radius:50%;
    }
    
    .eazy::after{
        content:'';
        display: inline-block;
        width: 10px;
        height:10px;
        background: #3385ff;
    }

雙冒號(hào)后面跟跟關(guān)鍵字before或者after，在后面的內(nèi)容即是要給這個(gè)偽元素添加的樣式。其中content屬性一定要設(shè)置，可以設(shè)置為空，否則不會(huì)顯示；其次，設(shè)置了依然沒有顯示就要設(shè)置表明這個(gè)偽元素塊級(jí)元素。

3.1 在來看兩個(gè)例子，項(xiàng)目開發(fā)中經(jīng)常要畫一些氣泡，比如

氣泡

這是兩種氣泡，帶有背景色的和帶有邊框的，實(shí)現(xiàn)上稍微有些區(qū)別，但是他們的小突起就是用偽元素畫的。
HTML：

    <div class="bubble-box">
        <div class="bubble-left">
            Hello, can I have a star?
        </div>
        &nbsp;&nbsp;&nbsp;
        <div class="bubble-top">
            Hello, can I have a star?
        </div>
        &nbsp;&nbsp;&nbsp;
        <div class="bubble-bottom">
            Hello, can I have a star?
        </div>
        &nbsp;&nbsp;&nbsp;
        <div class="bubble-right">
            Hello, can I have a star?
        </div>
        &nbsp;&nbsp;&nbsp;
        <div class="bubble-noColor">
            Hello, can I have a star?
        </div>
    </div>

css有點(diǎn)長，但是仔細(xì)觀察90%的代碼都是重復(fù)的并不難。主要變動(dòng)是使用定位position屬性控制小突起的位置，以及border-color來控制凸起箭頭的朝向。三角形的畫法原理可以看這里！

    .bubble-box{
        display: flex;
        padding: 10px;
    }
    .bubble-top{
        width: 120px;
        padding: 10px;
        background: #3385ff;
        border-radius: 6px;
        position: relative;
        color:#fff;
    }
    
    .bubble-top::before{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        border:6px solid #3385ff;
        border-color: transparent transparent #3385ff transparent;
        left: 46%;
        top: -12px;
    }
    
    .bubble-left{
        width: 120px;
        padding: 10px;
        background: #3385ff;
        border-radius: 6px;
        position: relative;
        color:#fff;
    }
    
    .bubble-left::before{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        border:6px solid #3385ff;
        border-color: transparent #3385ff transparent transparent;
        left: -12px;
        top: 24px;
    }
    
    .bubble-bottom{
        width: 120px;
        padding: 10px;
        background: #3385ff;
        border-radius: 6px;
        position: relative;
        color:#fff;
    }
    
    .bubble-bottom::before{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        border:6px solid #3385ff;
        border-color: #3385ff transparent transparent transparent;
        left: 46%;
        bottom: -12px;
    }
    
    .bubble-right{
        width: 120px;
        padding: 10px;
        background: #3385ff;
        border-radius: 6px;
        position: relative;
        color:#fff;
    }
    
    .bubble-right::before{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        border:6px solid #3385ff;
        border-color: transparent transparent transparent #3385ff;
        right: -12px;
        top: 24px;
    }
    
    .bubble-noColor{
        width: 120px;
        padding: 10px;
        border:1px solid #ccc;
        border-radius: 6px;
        position: relative;
        color:#0f0f0f;
    }
    
    .bubble-noColor::before{
        content: '';
        width: 9px;
        height: 9px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        background: white;
        transform: rotate(45deg);
        position: absolute;
        left: 46%;
        top: -6px;
    }

3.2 利用偽元素畫一個(gè)時(shí)間軸

如圖

時(shí)間軸

解析，每一行都只設(shè)置左邊框，這樣就這回出現(xiàn)一條豎線，然后每一行前面加一個(gè)圓點(diǎn)，就會(huì)呈現(xiàn)時(shí)間軸的樣式，加圓點(diǎn)當(dāng)然是用偽元素了。
先看HTML，很簡單：

    <div>
        <ul class="list">
            <li>2018-11-15 吃了好吃的</li>
            <li>2018-11-16 不開心</li>
            <li>2018-11-18 藍(lán)瘦香菇</li>
            <li>2018-11-23 滾蛋</li>
            <li>2018-12-10 嗯哼隨心隨遇把</li>
        </ul>
    </div>

css 先給li標(biāo)簽設(shè)置左邊框border-left，

    .list{
        padding: 10px;
        border: 1px solid #fff;
    }
    .list li{
        list-style: none;
        padding: 10px;
        border-left: 1px solid #ccc;
    }

第二步，添加偽元素

    .list li::before{
        content: '';
        display: inline-block;
        width: 6px;
        position: absolute;
        height: 6px;
        left: 16px;
        margin-top: 7px;
        border: 1px solid #ffab00;
        border-radius: 50%;
        background: #3385ff;
    }

3.3 偽元素怎么添加內(nèi)容的

偽元素雖然是不存在于DOM樹種的元素，但是也是可以添加內(nèi)容的，就是上面提到的content屬性。content屬性可以是URL、字符串甚至是圖片，視頻等。
我們把第三節(jié)剛開始的那個(gè)前后圓形和矩形的content設(shè)置為'1'和'2'.就變成這樣了。

content 有值

所以content就是這只偽元素中內(nèi)容的入口，這也解釋了為什么不設(shè)置這個(gè)屬性就不顯示的原因，哪怕設(shè)置為空，也相當(dāng)于我定義了這個(gè)偽元素。

最后再看一個(gè)例子：

目錄結(jié)構(gòu)

如果人工去標(biāo)示會(huì)非常的消耗成本，實(shí)際上偽元素就可以輕松解決這個(gè)問題。content + counters實(shí)現(xiàn)目錄結(jié)構(gòu)。
HTML：

    <div class="list2">
        <ul>
            <li>吃了好吃的
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </li>
            <li>不開心</li>
            <li>藍(lán)瘦香菇
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </li>
            <li>滾蛋</li>
            <li>嗯哼隨心隨遇把</li>
        </ul>
    </div>

css counter-reset定義一個(gè)計(jì)數(shù)器后面跟一個(gè)名字，這個(gè)屬性在哪個(gè)元素上設(shè)置則標(biāo)示遇到這個(gè)元素我就重新開始計(jì)數(shù)，如上面的HTML，我們把這個(gè)屬性設(shè)置到ul上，則遇到ul就重新計(jì)數(shù)（添加一個(gè)新的計(jì)數(shù)器，原計(jì)數(shù)器不受影響）。

    .list2{
        padding: 10px;
        border: 1px solid #ccc;
    }
    .list2 li{
        list-style: none;
    }
    .list2 ul{
        counter-reset: xuhao;
    }
    
    .list2 li::before{
        counter-increment: xuhao;
        content: counters(xuhao, ".") " ";
    }

在li元素的偽元素上接受這個(gè)計(jì)數(shù)值通過counters,第一參數(shù)接收計(jì)數(shù)器，第二參數(shù)指明新的計(jì)數(shù)值以什么字符鏈接在上一級(jí)計(jì)數(shù)值得后面

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS的偽類和偽元素

CSS的偽類和偽元素

1.偽元素和偽類的區(qū)別

2.常用的偽類

2.1.hover和active

2.2.first-child last-child nth-child(n/odd/even)

3.常用偽元素

3.1 在來看兩個(gè)例子，項(xiàng)目開發(fā)中經(jīng)常要畫一些氣泡，比如

3.2 利用偽元素畫一個(gè)時(shí)間軸

3.3 偽元素怎么添加內(nèi)容的

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS的偽類和偽元素

1.偽元素和偽類的區(qū)別

2.常用的偽類

2.1.hover和active

2.2.first-child last-child nth-child(n/odd/even)

3.常用偽元素

3.1 在來看兩個(gè)例子，項(xiàng)目開發(fā)中經(jīng)常要畫一些氣泡，比如

3.2 利用偽元素畫一個(gè)時(shí)間軸

3.3 偽元素怎么添加內(nèi)容的

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

3.1 在來看兩個(gè)例子，項(xiàng)目開發(fā)中經(jīng)常要畫一些氣泡，比如