知方可補不足～CSS中的幾個僞元素

對於一個很好的編輯器VS來講,它對於編程語句的自動提示功能是很強大的,有時,咱們根本不須要看相關API,而直接看VS給咱們的提示就能夠完成一個新技術的學習了.

今天咱們來講幾個CSS中的僞元素,它們在項目開發中用的並很少,但確實頗有用,在項目中不用它,是由於你們不能瞭解它們,下面是一個工做場景,若有四個按鈕,分別是創建,編輯,刪除和修改,而咱們要求這在前臺顯示的漢字是統一的,若是要改它們,就都要變的,如,咱們但願把創建改成"新建",那麼全部的創建都要改爲新建,這代碼量但是不小,固然,若是你這樣寫<a>創建</a>這改起來是挺麻煩的,而若是你使用僞元素呢?看下面代碼:<a class="create"></a>,而在頁面上也會顯示"創建",而它就是經過僞元素來實現的.

一 元素前和元素後添加指定內容

    /* 在類名爲read的a標籤位置的後面添加查看字符,例如:<a class='read'>詳細</a>,它的結果就是"詳細查看" */
    a.read:after {
        content: '查看';
    }

    a.del:after {
        content: '刪除';
    }

    a.edit:after {
        content: '編輯';
    }

    a.create:after {
        content: '新建';
    }

HTML調用代碼

<a class="create"></a>
<a class="del"></a>
<a class="edit"></a>
<a class="read"></a>

頁面顯示截圖

二 爲元素集合的第一個元素添加指定樣式

/* 爲樣式爲list的table標籤下的第一個tr標籤,添加下面的CSS樣式 */

table.list tr:first-child {
    background-color: #5C87B2;
    color: #fff;
    font-weight: bold;
}

HTML調用代碼

<table class="list">
    <tr>
        <td>編號</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
</table>

頁面顯示截圖