7. 否定選擇器

否定選擇器:not()，可以讓你定位不匹配該選擇器的元素

比如，如果你需要定義表單元素中的input元素，但是又不想包括submit類型的input的時候會灰常有用——你想它們有不同的樣式，以看起來像按鈕：

input:not([type="submit"]) {
	width: 200px;
	padding: 3px;
	border: 1px solid #000000;
	}

另一個例子，你想你的日志的div中的所有段落(p)有比較大的字體，除了表示時間和日期的段落：

.post p:not(.date) {
	font-size: 13px;
	}

你可以想象這個選擇器能帶給你的潛力了吧，你能夠從你的CSS文件中剝離(剔除)的無用的大量選擇器也被它廣泛支持嗎？

瀏覽器支持

Internet Explorer在這里常常是讓我們感到掃興的東西：一點都不支持，甚至在IE8中。這大概意味著這些選擇器將仍不得不等到一些開發(fā)者開始不再顧慮將它添加到他們的樣式表中才會普及。

8. 偽元素

偽元素允許你操作HTML中不是真實存在的元素，比如一個文本塊的第一行或者第一個字母。

偽元素在CSS 2.1中就已經(jīng)存在，但是CSS 3說明書表示他們應(yīng)該使用雙冒號“::”，以與偽類區(qū)分開來。在CSS 2.1中，他們也是使用單個冒號“:”的。瀏覽器會將能夠接受兩種格式，除非這些偽元素只存在于CSS3中。

::first-line

::first-line偽元素將匹配block、inline-block、table-caption、table-cell等等級別元素的第一行

這對在你的文字塊上添加一些微妙的排版細(xì)節(jié)相當(dāng)有用，比如，將一片文章的第一行文字改成小寫字母：

h1 + p::first-line {
	font-variant: small-caps;
	}

如果你專心的閱讀了我們前面的內(nèi)容，你將會了解到上面的語法意味著，緊緊的跟在H1標(biāo)簽之后(+)的段落會將其第一行文字顯示為小寫字母。

你也可以針對相關(guān)的div的第一行，而不用針對實際的段落標(biāo)簽(p):

div.post p::first-line { font-variant: small-caps; }

或者更進一步，定位某個特低的div的第一個段落的第一行：

div.post > p:first-child::first-line {
	font-variant: small-caps;
	}

這里，“>”符號表示你指定的是post div的直接子級元素，這樣如果段落被包括在第二級div中，它就不會匹配這個選擇器。

::first-letter

::first-letter偽元素將會匹配一個文本塊的第一個字母，除非在同一行里面包含一些其它元素，比如圖片。

和::first-line偽類一樣，::first-letter通常用于給文本元素添加排版細(xì)節(jié)，比如下沉字母或首字母。

這里是如何使用::first-letter偽元素創(chuàng)建首字下沉的例子:

p {
	font-size: 12px;
	}
 
p::first-letter {
	font-size: 24px;
	float: left;
	}

注意如果你在某些元素中同時使用::first-line 和::first-letter ，::first-letter 屬性將覆蓋從::first-line中繼承下來的某些屬性。

如果你不知道W3C規(guī)則的話，這個元素有時會產(chǎn)生意想不到的結(jié)果：它事實上是使用最長的規(guī)則的選擇器！所以如果你計劃使用它的話最好仔細(xì)的閱讀一下 (其它選擇器也一樣)。

::before 和 ::after

::before和::after 偽元素用于在一個元素的前面或后面插入內(nèi)容，純CSS方法。

這些元素將繼承它們將附加的元素的大部分屬性。

假設(shè)你想在你的頁面中的圖標(biāo)的描述前面添加文字“Graphic number x:”。你將無需寫文字“Graphic number”，或者自己手動添加數(shù)字：

.post {
	counter-reset: image;
	}
 
p.description::before {
	content: "Figure number " counter(image) ": ";
	counter-increment: image;
	}

那么這會產(chǎn)生什么？

首先，我們告訴HTML來創(chuàng)建“image”計數(shù)器。比如我們可以添加該屬性到頁面的body。同樣我們也可以給該計數(shù)器起任何一個名字，只要你想，只要我們常常使用同樣的名字引用它：自己試試吧！

那么我們想在class為”description”的每一個段落之前添加這一塊內(nèi)容: “Figure number ” — 注意只有我們在引號里面寫的內(nèi)容才會被創(chuàng)建到頁面中，所以我們也要添加一個空格！

然后，我們就有了counter(image):這將用到我們之前在.post選擇器中定義的屬性。它默認(rèn)會從數(shù)字1開始。

下一個屬性在那里表示計數(shù)器知道對于每一個p.description，它需要將image計數(shù)器增加1 (counter-increment: image)。

它并不像看起來的那么復(fù)雜，而且還會灰常的有用。

::before和::after偽元素常常只使用content屬性，來添加一些短語或排版元素，但是這里我們展示了我們?nèi)绻�以一種更加強大的結(jié)合counter-reset和counter-increment屬性的方式來使用它們。

有趣的是: ::first-line 和::first-letter 偽元素可以匹配使用::before偽元素生成的內(nèi)容，如果存在的話。

瀏覽器支持

如果使用單個冒號的話(比如, :first-letter, 而不是::first-letter)，這些偽元素被IE8支持(但是不被IE7或6支持)。但是左右其他的主流瀏覽器都支持這些選擇器。

結(jié)語

乏味的講述終于結(jié)束了，現(xiàn)在該你來領(lǐng)悟本文的要義并自己嘗試了: 開始通過創(chuàng)建實驗性的頁面并測試所有的這些選擇器，在有疑問的時候返回這里并確保總是遵循W3C的規(guī)則，但是請不要只是坐在那里想這些選擇器尚未被完全支持你就無視它們。

如果你敢于冒險，或者你不害怕放棄之前的遍地?zé)o用和非語義化的class和id，為什么不嘗試一兩個這些強大的CSS選擇器到你的下一個項目中呢？我們保證你不會回頭的！