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） 偽類別/偽元素一覽表

<偽類別如下>

##:active##選擇正在被啟動的元素1:hover選擇被滑鼠懸浮著元素1:link選擇未被存取的元素1#:visited選擇已被存取的元素1:first-child選擇滿足是其父元素的第一個子元素的元素2:lang選擇帶有指定lang 屬性的元素2#:focus選擇擁有鍵盤輸入焦點的元素2#:enable##選擇每個已啟動的元素選擇每個已禁止的元素選擇每個被選取的元素##選擇目前的錨點元素3

3		:disable
3		#:checked
3		#:target
		<偽元素如下>

: :first-letter

選擇指定元素的第一個單字1#::first-line選擇指定元素的第一行1::after#在指定元素的內容後面插入內容2::before在指定元素的內容前面插入內容2::selection選擇指定元素中被使用者選取的內容3#

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

（學習影片分享：css影片教學）

以上是css中::before是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！