小編給大家分享一下::before與:before的區(qū)別有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、::before是什么？有什么作用？

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

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

/* 在鏈接之前添加一顆心 */
a::before {
  content: "♥";
}

我們來看一個(gè)簡單的示例：

假設(shè)你有一個(gè)帶有一些文本的blockquote。你可以使用::before在實(shí)際文本之前插入內(nèi)容，比如：一些花哨的引號(hào)。引號(hào)將顯示在頁面上，但不會(huì)添加到DOM中的blockquote中。

< blockquote >
    你目前的情況并不能確定你可以去哪里; 他們只是決定你從哪里開始。- Nido Qubein
</ blockquote >

以下代碼段將使用塊引用添加幾個(gè)花哨的引號(hào)::before。引號(hào)將在引用文本之前的blockquote中添加，并與其內(nèi)聯(lián)。

blockquote :: before {     
  content：“\ 201C” ;    / *樣式引用* /     
  color：deepPink;    
  font-size: 3em;    
  position: relative;    
  top: 20px;
}

content引用是通過轉(zhuǎn)義其在屬性內(nèi)定義的Unicode值。這就是通常通過CSS表示和添加字形的方式。

我們來看看運(yùn)行效果：

由于使用偽元素插入的內(nèi)容未插入到DOM內(nèi)，因此通常無法使用瀏覽器的開發(fā)者工具查看和檢查插入的內(nèi)容。但是，Chrome 32+和Firebug for Firefox允許你查看偽元素在DOM中的位置，通過選擇它，你可以在CSS面板中查看與其相關(guān)聯(lián)的樣式。在Chrome的開發(fā)工具中檢查上述演示會(huì)顯示以下結(jié)果：

可以看出，添加有::before的內(nèi)容與blockquote內(nèi)的其他內(nèi)容內(nèi)聯(lián)并位于其之前。

由于::before內(nèi)容是在元素內(nèi)的其他內(nèi)容之前插入的，這也意味著偽元素將堆疊在源樹中的其他元素之后。

偽元素可用于插入幾乎任何類型的內(nèi)容，包括字符（如上所述），文本字符串和圖像。例如，以下是::before具有有效內(nèi)容的所有有效聲明：

.element :: before {   
  content：url（path / to / image.png）; / *圖像，例如，圖標(biāo)* /
}
.element :: before {    
  content：“注意：” ; / *一個(gè)字符串* /
}
.element :: before {   
  content：“\ 201C” ; / *也算作一個(gè)字符串。轉(zhuǎn)義Unicode會(huì)將其渲染為字符* /
}

注：使用偽元素插入的圖像無法調(diào)整大小，它們會(huì)按原樣插入，因此你必須在使用前調(diào)整圖像大小。

二、::before與:before的的異同點(diǎn)

相同點(diǎn)：

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

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

不同點(diǎn)：

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

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

說明：

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

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

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

.test:hover::before{
    /* 這時(shí)animation和transition才生效 */
}

總結(jié)

以上是生活随笔為你收集整理的::before与:before的区别有哪些的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。