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

10年積累的網站設計、做網站經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有海棠免費網站建設讓你可以放心的選擇與我們合作。

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

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

css中::before是什么意思

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

利用::before可以把需插入的內容插入到元素的其他內容之前，并且默認內聯(lián)顯示。::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開發(fā)中建議使用::before比較好

說明：

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

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

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

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

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

• 偽類

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

• 偽元素

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

2） 語法區(qū)別

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

3） 偽類/偽元素一覽表

<偽類如下>

:active	選擇正在被激活的元素	1
:hover	選擇被鼠標懸浮著元素	1
:link	選擇未被訪問的元素	1
:visited	選擇已被訪問的元素	1
:first-child	選擇滿足是其父元素的第一個子元素的元素	2
:lang	選擇帶有指定 lang 屬性的元素	2
:focus	選擇擁有鍵盤輸入焦點的元素	2
:enable	選擇每個已啟動的元素	3
:disable	選擇每個已禁止的元素	3
:checked	選擇每個被選中的元素	3
:target	選擇當前的錨點元素	3

<偽元素如下>

::first-letter	選擇指定元素的第一個單詞	1
::first-line	選擇指定元素的第一行	1
::after	在指定元素的內容后面插入內容	2
::before	在指定元素的內容前面插入內容	2
::selection	選擇指定元素中被用戶選中的內容	3

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

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

分享文章：css中::before怎么使用
分享地址：http://www.chinadenli.net/article42/jdhiec.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、小程序開發(fā)、域名注冊、軟件開發(fā)、網站收錄、企業(yè)網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)