這篇文章主要介紹“css中::before怎么使用”，在日常操作中，相信很多人在css中::before怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css中::before怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

10年積累的網(wǎng)站設(shè)計(jì)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有海棠免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

css中“::before”的意思是“在...之前”，是一個(gè)偽類元素，用于創(chuàng)建一個(gè)偽元素，并將其設(shè)置為選中元素的第一個(gè)子元素，插入到元素的其他內(nèi)容之前，語(yǔ)法為“element::before{樣式代碼}”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css中::before是什么意思

在css中，::before 是一個(gè)偽類元素，代表生成的內(nèi)容元素，表示相應(yīng)元素的可抽象樣式的第一個(gè)子元素，即：所選元素的第一個(gè)子元素。

利用::before可以把需插入的內(nèi)容插入到元素的其他內(nèi)容之前，并且默認(rèn)內(nèi)聯(lián)顯示。::before需要使用content屬性來(lái)指定內(nèi)容的值。

::befor使用場(chǎng)景（比如在一個(gè)元素前面加一個(gè)圖標(biāo)）

     2019/11/29 15:35:51
//在這前面加一個(gè)小鬧鐘的圖標(biāo)就可使用::befor

.test::before
  {
   content: url(./1597910280\(1\).png);
 }

相同點(diǎn)：

1、偽類對(duì)象，用來(lái)設(shè)置對(duì)象前的內(nèi)容

2、::before和:before寫(xiě)法是等效的

不同點(diǎn)：

:befor是Css2的寫(xiě)法，::before是Css3的寫(xiě)法

:before的兼容性要比::before好 ，不過(guò)在H5開(kāi)發(fā)中建議使用::before比較好

說(shuō)明：

1、偽類元素要配合content屬性一起使用

2、偽類元素是css渲染層加入的，不能通過(guò)js來(lái)操作

3、偽類對(duì)象特效通常通過(guò)：hover偽類樣式來(lái)激活

我覺(jué)得這個(gè)有點(diǎn)雞肋，可用可不用。

偽元素和偽類得區(qū)別

• 偽類

偽類用于選擇DOM樹(shù)之外的信息，或是不能用簡(jiǎn)單選擇器進(jìn)行表示的信息。前者包含那些匹配指定狀態(tài)的元素，比如:visited，:active；后者包含那些滿足一定邏輯條件的DOM樹(shù)中的元素，比如:first-child，:first-of-type，：target。css偽類用于向某些選擇器添加特殊的效果。

• 偽元素

偽元素為DOM樹(shù)沒(méi)有定義的虛擬元素。不同于其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內(nèi)容。比如::before表示選
擇元素內(nèi)容的之前內(nèi)容，也就是""；::selection表示選擇元素被選中的內(nèi)容。  css偽元素用于向某些選擇器設(shè)置特殊效果。

2） 語(yǔ)法區(qū)別

??在CSS3中，偽類與偽元素在語(yǔ)法上也有所區(qū)別，偽元素修改為以::開(kāi)頭。但因?yàn)闅v史原因，瀏覽器對(duì)以:開(kāi)頭的偽元素也繼續(xù)支持，但建議規(guī)范書(shū)寫(xiě)為::開(kāi)頭。

3） 偽類/偽元素一覽表

<偽類如下>

<偽元素如下>

偽類與類優(yōu)先級(jí)相同，偽元素與標(biāo)簽優(yōu)先級(jí)相同。順便說(shuō)一下優(yōu)先級(jí)怎么判斷，一般是 !important > 行內(nèi)樣式> ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性。還有一個(gè)簡(jiǎn)單的計(jì)算方法，內(nèi)聯(lián)樣式表的權(quán)值為 1000，ID 選擇器的權(quán)值為 100，Class 類選擇器的權(quán)值為 10，HTML 標(biāo)簽選擇器的權(quán)值為 1，權(quán)值實(shí)際并不是按十進(jìn)制計(jì)算的，用數(shù)字表示只是說(shuō)明思想，我們可以把選擇器中規(guī)則對(duì)應(yīng)做加法，比較權(quán)值大小，權(quán)值越大優(yōu)先級(jí)越高，如果權(quán)值相同前面的樣式會(huì)被后面的覆蓋。

到此，關(guān)于“css中::before怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！