:before 和 :after 的內幕 以及偽類 ( 轉 )

標籤：

 

原文連結    http://www.cnblogs.com/zhujl/archive/2012/05/08/2489411.html

------------------------------------------------------------------------------------------------------------------------------------

 

偽類 VS 虛擬元素

這兩個概念很容易混淆，即使你Google或者查W3C的資料都不一定搞得清。答案其實很簡單，如下：

偽類：作用對象是整個元素

首先，來看幾個偽類

a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444}

如你所見，儘管這些條件不是基於DOM的，但結果每一個都是作用於一個完整的元素，比如整個連結，段落，div等等。

虛擬元素：作用於元素的一部分

還是來看幾個例子：

p::first-line {color: #555}p::first-letter {color: #666}a::before {content : "hello world";}

如你所見，虛擬元素作用於元素的一部分：一個段落的第一行 或者 第一個字母。

更加神奇的是可以作用於並未加入HTML的對象，這就是:before 和 :after，也就是本文要說的內容。

:before VS ::before

為什麼有兩種寫法呢？它們的效果一樣嗎？

答案是一樣的，來看一個例子：

/*CSS2*/.example:before {}.example:after {}.example:first-child {}  /*CSS3*/.example::before {}.example::after {}.example::first-child {}

在CSS2中，我們使用一個冒號表示偽類和虛擬元素。然而，為了區別已有的這兩個，CSS3專門為虛擬元素設計了兩個冒號。

IE再次毀了一切

所有現代瀏覽器都支援 :: 文法，但是悲劇的IE8不支援，大多數開發人員為了相容IE，使用CSS2的 :。為了保持簡單一致，本文後面的部分都是用CSS2格式。

什麼是 :before 和 :after

:before 和 :after 使你可以通過CSS加入一些內容，從而避免了HTML的淩亂。特別是一些裝飾性的元素，從語義化考慮本就不該出現在HTML中。

舉個例子，你的網站有一些電話號碼，你希望在它們前面加一個icon ?。你可以用 :before 虛擬元素實現這個效果：

.phoneNumber:before {    content: "?";    font-size: 15px;}

 這段代碼使得.phoneNumber的所有元素的前面插入了一個icon。:after 作用一樣，你可以猜到會出現什麼效果了

.phoneNumber:after {    content: "$#9742";    font-size: 15px;}

一個簡潔的例子

最近，:before 和 :after 變得非常流行的一個原因是它們可以增加純CSS設計的複雜度。不需要多餘的標籤，我們可以使用虛擬元素添加額外的可樣式化的元素或層級。

來看一個例子，這是一個簡單的按鈕，圓形並有紅色的漸層。

.button {    height: 100px;    width: 100px;    position: relative;    margin: 50px;    color: white;    text-align: center;    line-height: 100px;     /*Rounded Corners and Shadows*/    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);     /*Ridiculous Gradient Syntax*/    background: #e51d16; /* Old browsers */    background: -moz-linear-gradient(top,  #e51d16 0%, #b21203 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* IE10+ */    background: linear-gradient(top,  #e51d16 0%,#b21203 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#e51d16‘, endColorstr=‘#b21203‘,GradientType=0 ); /* IE6-9 */}

效果如下：

現在，我們需要在按鈕的外圍添加一層稍暗的地區，並且給它一個內陰影製作效果，看起來就像是嵌入的一樣。這次，我們不用添加額外的標籤，只需要用一個空的虛擬元素。

.button:before {    content:"";}

現在我們開始實現想要的效果。

.button:before {    content:"";    width: 100%;    height: 100%;    display: block;    z-index: -1;    position: relative;    padding: 15px;    background: #ddd;    left: -15px;    top: -15px;    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);}

現在按鈕看起來更立體了。 :before 實現了外圍的圓環。我們把z-index設定為-1，使它位於按鈕的下方，並且使用相對定位校正位置。

接下來，我們又想加一層同樣的效果。這一次，我們使用 :after

.button:after {    content:"";    width: 100%;    height: 100%;    display: block;    z-index: -2;    position: relative;    padding: 25px;    background: #eee;    position: absolute;    left: -25px;    top: -25px;    -webkit-border-radius: 100px;    -moz-border-radius: 100px;    border-radius: 100px;    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);}

效果如下：　

通過 :before 和 :after 你還能做什嗎？

使用很廣泛，下面給出幾個比較流行的例子

清除浮動

CSS的浮動很讓人頭痛，世界各地的開發人員都在尋找更好的解決方案。

Nicolas Gallagher 提出的方法也許是當今最受歡迎的一個，即利用 :before 和 :after 清除浮動。

/* For modern browsers */.cf:before,.cf:after {    content:"";    display:table;}  .cf:after {    clear:both;}  /* For IE 6/7 (trigger hasLayout) */.cf {    zoom:1;}

這裡 :before 阻止了 top-margin 合并， :after則用於清除浮動，這種方法做的極為乾淨漂亮。

你也許會說還有 overflow: hidden; 方式呢！當然這也是一種可選方案，當你發現overflow不合適的時候，可以選擇這裡提到的方式。

CSS圖形

使用純CSS實現某些複雜的圖形是不是很有趣？通過巧妙的操作 border 和 一些虛擬元素就可以實現這些圖形。

CSS3Shapes.com 有很多例子，這裡就舉一個八邊形的例子。

#octagon {   width: 100px;   height: 100px;   background: blue;}  #octagon:before {   height: 0;   width: 40px;   content:"";   position: absolute;   border-bottom: 30px solid blue;   border-left: 30px solid white;   border-right: 30px solid white; }  #octagon:after {   height: 0;   width: 40px;   content:"";   position: absolute;   border-top: 30px solid blue;   border-left: 30px solid white;     border-right: 30px solid white;    margin: 70px 0 0 0;}

可以看到，通過定位、設定border，我們就能把一些簡單的形狀組合成複雜的圖形，相當的酷！

 

:before 和 :after 的內幕 以及偽類 ( 轉 )