css中::before怎么使用

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

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

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css中::before是什么意思

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

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

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

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

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

相同點：

1、偽類對象，用來設置對象前的內容

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

不同點：

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

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

說明：

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

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

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

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

偽元素和偽類得區別

• 偽類

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

• 偽元素

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

2） 語法區別

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

3） 偽類/偽元素一覽表

<偽類如下>

<偽元素如下>

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

到此，關于“css中::before怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！