css中::before怎么使用

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

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

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

css中::before是什么意思

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

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

::befor使用場景（比如在一個元素前面加一個圖標）

<p class="test">
     2019/11/29 15:35:51
</p>//在這前面加一個小鬧鐘的圖標就可使用::befor

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

相同點：

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

2、::before和:before寫法是等效的

不同點：

:befor是Css2的寫法，::before是Css3的寫法

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

說明：

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

2、偽類元素是css渲染層加入的，不能通過js來操作

3、偽類對象特效通常通過：hover偽類樣式來激活

我覺得這個有點雞肋，可用可不用。

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

• 偽類

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

• 偽元素

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

2） 語法區(qū)別

??在CSS3中，偽類與偽元素在語法上也有所區(qū)別，偽元素修改為以::開頭。但因為歷史原因，瀏覽器對以:開頭的偽元素也繼續(xù)支持，但建議規(guī)范書寫為::開頭。

3） 偽類/偽元素一覽表

<偽類如下>

<偽元素如下>

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

到此，關(guān)于“css中::before怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>