CSS中的幾個(gè)常用偽元素的使用方法

本篇內(nèi)容介紹了“CSS中的幾個(gè)常用偽元素的使用方法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

對(duì)于一個(gè)很好的編輯器VS來(lái)說(shuō),它對(duì)于編程語(yǔ)句的自動(dòng)提示功能是很強(qiáng)大的,有時(shí),我們根本不需要看相關(guān)API,而直接看VS給我們的提示就可以完成一個(gè)新技術(shù)的學(xué)習(xí)了.

今天我們來(lái)說(shuō)幾個(gè)CSS中的偽元素,它們?cè)陧?xiàng)目開(kāi)發(fā)中用的并不多,但確實(shí)很有用,在項(xiàng)目中不用它,是因?yàn)榇蠹也荒芰私馑鼈?下面是一個(gè)工作場(chǎng)景,如有四個(gè)按鈕,分別是建立,編輯,刪除和修改,而我們要求這在前臺(tái)顯示的漢字是統(tǒng)一的,如果要改它們,就都要變的,如,我們希望把建立改為"新建",那么所有的建立都要改成新建,這代碼量可是不小,當(dāng)然,如果你這樣寫<a>建立</a>這改起來(lái)是挺麻煩的,而如果你使用偽元素呢?看下面代碼:<a class="create"></a>,而在頁(yè)面上也會(huì)顯示"建立",而它就是通過(guò)偽元素來(lái)實(shí)現(xiàn)的.

一 元素前和元素后添加指定內(nèi)容

代碼如下:

/* 在類名為read的a標(biāo)簽位置的后面添加查看字符,例如:<a class='read'>詳細(xì)</a>,它的結(jié)果就是"詳細(xì)查看" */
   a.read:after {
       content: '查看';
   }</p> <p>    a.del:after {
       content: '刪除';
   }</p> <p>    a.edit:after {
       content: '編輯';
   }</p> <p>    a.create:after {
       content: '新建';
   }

HTML調(diào)用代碼

代碼如下:

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

頁(yè)面顯示截圖

二 為元素集合的第一個(gè)元素添加指定樣式

代碼如下:

/* 為樣式為list的table標(biāo)簽下的第一個(gè)tr標(biāo)簽,添加下面的CSS樣式 */
table.list tr:first-child {
   background-color: #5C87B2;
   color: #fff;
   font-weight: bold;
}

HTML調(diào)用代碼

代碼如下:

<table class="list">
   <tr>
       <td>編號(hào)</td>
   </tr>
   <tr>
       <td>1</td>
   </tr>
   <tr>
       <td>2</td>
   </tr>
</table>

頁(yè)面顯示截圖

“CSS中的幾個(gè)常用偽元素的使用方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！