|
原文：征服高級(jí)CSS選擇器
譯自：Taming Advanced CSS Selectors
CSS是對(duì)網(wǎng)頁設(shè)計(jì)師可用的最強(qiáng)大的工具之一。使用它我們可以在幾分鐘內(nèi)改變一個(gè)網(wǎng)站的界面，而不用改變頁面的標(biāo)簽。但是盡管事實(shí)上，我們每個(gè)人也都意識(shí)到了它是有用的，CSS 選擇器遠(yuǎn)未發(fā)揮它們的潛力，有的時(shí)候我們還趨向于使用過多的和無用的class、id、div、span等把我們的HTML搞的很凌亂。
避免讓這些“瘟疫”在你的標(biāo)簽中傳播并保持其簡(jiǎn)潔和語義化的最佳方式，就是使用更復(fù)雜的CSS選擇器，它們可以定位于指定的元素而不用使用額外的class或id，而且通過這種方式也可以讓我們的代碼和樣式更加靈活。
CSS的優(yōu)先級(jí)
在深入研究高級(jí)CSS選擇器領(lǐng)域之前，理解CSS優(yōu)先級(jí)是如何工作的是很重要的，這樣我們就知道如何適當(dāng)?shù)氖褂梦覀兊倪x擇器并避免浪費(fèi)大量的時(shí)間來調(diào)試一些只要我們注意到優(yōu)先級(jí)的話就很容易被搞定的問題
當(dāng)我們寫CSS的時(shí)候我們必須注意有些選擇器在級(jí)聯(lián)(cascade)上會(huì)高于其它選擇器，我們寫在最后面的選擇器將不一定會(huì)覆蓋前面我們寫在同一個(gè)元素的樣式。
那么你如何計(jì)算指定選擇器的優(yōu)先級(jí)？如果你考慮到將優(yōu)先級(jí)表示為用逗號(hào)隔開的四個(gè)數(shù)字就會(huì)相當(dāng)簡(jiǎn)單，比如：1, 1, 1, 1 或0, 2, 0, 1
- 第一個(gè)數(shù)字(a)通常就是0，除非在標(biāo)簽上使用style屬性；
- 第二個(gè)數(shù)字(b)是該選擇器上的id的數(shù)量的總和；
- 第三個(gè)數(shù)字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如 li[id=red])；
- 第四個(gè)數(shù)字(d)計(jì)算元素(就像table、p、div等等)和偽元素(就像:first-line等)；
- 通用選擇器(*)是0優(yōu)先級(jí)；
- 如果兩個(gè)選擇器有同樣的優(yōu)先級(jí)，在樣式表中后面的那個(gè)起作用。
讓我們看幾個(gè)例子，這樣或許比較容易理解些：
- #sidebar h2 — 0, 1, 0, 1
- h2.title — 0, 0, 1, 1
- h2 + p — 0, 0, 0, 2
- #sidebar p:first-line — 0, 1, 0, 2
在下面的例子中，第一個(gè)將會(huì)起作用，因?yàn)樗鹊诙䝼�(gè)優(yōu)先級(jí)高：
- #sidebar p#first { color: red; } — 0, 2, 0, 1
- #sidebar p:first-line { color: blue; } — 0, 1, 0, 2
至少基本理解優(yōu)先級(jí)是如何工作的是很重要的，但是一些工具比如Firebug，在我們審查指定元素的時(shí)候，按照選擇器的優(yōu)先級(jí)列出所有的css選擇器對(duì)讓我們知道在指定元素上哪個(gè)選擇器是有效的是很有用的。
讓你非常容易的看到那個(gè)選擇器作用于一個(gè)元素上了。
有用的文章：
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 下一頁 征服高級(jí)CSS選擇器 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 征服高級(jí)CSS選擇器 [1]
第 2 頁 
