篇首語(yǔ)

也許你覺得你已經(jīng)理解了CSS方面的知識(shí)了让虐，確實(shí)CSS和HTML的學(xué)習(xí)特點(diǎn)也是先易后難。如果你覺得CSS很簡(jiǎn)單的話，你可以直接通過點(diǎn)擊目錄跳轉(zhuǎn)到CSS優(yōu)先級(jí)部分看一下富腊，如果你覺得這些也都是小case蛆挫。 那么你可以跳過本文赃承，當(dāng)然你也可以當(dāng)成一篇笑話來看。不過本文的知識(shí)都是我的經(jīng)驗(yàn)和總結(jié)悴侵，如果能找到我文章中的錯(cuò)誤瞧剖，再下更是感激不盡，我又有可以修正自己錯(cuò)誤的機(jī)會(huì)了可免。

啰嗦的開頭

愉快的寫著代碼抓于，啪啦啪啦的敲擊著鍵盤。音響飄出若有若無的鋼琴曲浇借，空氣中彌漫著剛剛磨好的咖啡香味捉撮。心中贊嘆著生活真特么美好啊。突然看到新來的同事走進(jìn)我的辦公室妇垢，我心中立馬感嘆巾遭，要不是來中斷我的工作的話就特么更美好了肉康。果不其然是來問問題的，哎~這小子上學(xué)的時(shí)候不好好學(xué)習(xí)灼舍，畢業(yè)開始工作了這才感受到職場(chǎng)上技術(shù)人員之間那種競(jìng)爭(zhēng)壓力了吼和，才來好好學(xué)習(xí)，何必當(dāng)初啊骑素。不過知道學(xué)的人總是會(huì)不斷進(jìn)步的炫乓。

腆著個(gè)臉在心中數(shù)落著別人，回想自己何嘗不是上學(xué)的時(shí)候拼命玩献丑，上班了還是拼命玩末捣，結(jié)婚了才感到壓力，才去自覺地學(xué)習(xí)创橄。哎~說多了都是淚箩做！不過這小家伙的學(xué)習(xí)態(tài)度還是值得肯定的，雖然問的問題都比較基礎(chǔ)筐摘，但是從整體來看卒茬，問的問題也是在逐步提高著難度。其實(shí)我寫博客也是為了應(yīng)付這些問問題的小家伙們咖熟，先讓他們自己看圃酵，如果不理解再來問我。這樣不會(huì)太耽誤我工作的進(jìn)度馍管。先看看這小子來問什么問題吧郭赐。

果不其然，是個(gè)比較基礎(chǔ)的問題确沸。是關(guān)于兄弟選擇器的捌锭。好吧，前面的廢話終于鋪墊完成罗捎。開始寫博客正文吧——本篇可以叫做CSS基礎(chǔ)之旅了观谦。感謝這些小家伙們讓我的基礎(chǔ)也夯實(shí)了許多，有些比較基礎(chǔ)的東西因?yàn)橛玫牟皇呛芏嘟安耍^段時(shí)間很容易遺忘豁状。當(dāng)“老師”去講解的時(shí)候，也讓自己更好的去記憶和理解倒得。

CSS基礎(chǔ)

想要了解掌握CSS選擇的相關(guān)知識(shí)泻红，就必須先要了解CSS的一些基礎(chǔ)知識(shí)。

CSS解決了一個(gè)普遍的問題

HTML標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容霞掺。通過使用 <h1>谊路、<p>、<table> 這樣的標(biāo)簽菩彬，HTML的初衷是表達(dá)“這是標(biāo)題”缠劝、“這是段落”潮梯、“這是表格”之類的信息。同時(shí)文檔布局由瀏覽器來完成剩彬，而不使用任何的格式化標(biāo)簽酷麦。

由于兩種主要的瀏覽器（Netscape 和Internet Explorer）不斷地將新的HTML標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到HTML規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來越困難喉恋。

為了解決這個(gè)問題，萬維網(wǎng)聯(lián)盟（W3C）母廷，這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟轻黑，肩負(fù)起了HTML標(biāo)準(zhǔn)化的使命，并在 HTML4.0之外創(chuàng)造出樣式（Style）琴昆。

所有的主流瀏覽器均支持層疊樣式表氓鄙。

以上說明了CSS的由來，自從這貨誕生伊始就注定了它的不平凡业舍。不管是理論模型還是項(xiàng)目實(shí)踐毫無爭(zhēng)議的證明了CSS在WEB設(shè)計(jì)領(lǐng)域的突破性作用抖拦。從前端工程師的視角來看待CSS，不亞于看到活生生的超人那樣震撼舷暮，層疊樣式表CSS以救世主的姿態(tài)將當(dāng)時(shí)的工程師從苦逼的工作中解放了出來——樣式和結(jié)構(gòu)的分離态罪，讓維護(hù)和開發(fā)的工作變的更具效率；也讓W(xué)EB代碼更具備可讀性下面。

CSS樣式表的構(gòu)成比較簡(jiǎn)單复颈，樣式表由多條樣式或者叫規(guī)則的東西組合而成。我個(gè)人比較習(xí)慣的叫規(guī)則沥割，具體叫什么無所謂耗啦，如果愿意的話我們可以叫它們阿狗阿貓什么的，關(guān)鍵點(diǎn)在于理解机杜。每一條CSS規(guī)則主要由兩個(gè)部分構(gòu)成：選擇器帜讲，以及一條或多條聲明；每條聲明由一個(gè)屬性和一個(gè)值組成椒拗。

CSS規(guī)則由選擇器和聲明構(gòu)成似将，聲明由屬性和值構(gòu)成。

很簡(jiǎn)單不是么陡叠？網(wǎng)頁(yè)最后呈現(xiàn)出來的效果玩郊，就是由一個(gè)個(gè)的CSS規(guī)則組成的；而每個(gè)規(guī)則是由選擇器和聲明構(gòu)成枉阵；聲明則是由屬性和值組成译红。在合理使用選擇器的情況下，能熟練運(yùn)用每一個(gè)CSS屬性并了解其值的含義的人兴溜，才是高手中的高手侦厚。從某種方面來講耻陕，我們平常CSS知識(shí)的積累過程，其實(shí)就是CSS屬性及其值的知識(shí)和運(yùn)用的積累過程刨沦。

CSS工作原理

在用戶訪問一個(gè)網(wǎng)頁(yè)的時(shí)候诗宣，頁(yè)面會(huì)加載到瀏覽器當(dāng)中。表面上看頁(yè)面唰~的一下就出來了想诅，但是其背后較深層的工作可不是唰一下這么簡(jiǎn)單召庞。訪問的本質(zhì)其實(shí)是下載web服務(wù)器上的資源，然后通過瀏覽器的渲染功能来破，渲染出設(shè)計(jì)者的設(shè)計(jì)意圖篮灼。這樣從總整體上來，瀏覽器的工作原理是下面的順序：

1. 瀏覽器從服務(wù)器上下載資源的順序是從上到下徘禁，瀏覽器的渲染的順序也是從上到下诅诱，下載和渲染是同時(shí)進(jìn)行的。
2. 在渲染到頁(yè)面的某一部分時(shí)送朱，當(dāng)前部分之前的所有部分都已經(jīng)下載完成（并不是所有相關(guān)聯(lián)的元素都已經(jīng)下載完）娘荡。
3. 如果遇到語(yǔ)義解釋性的標(biāo)簽嵌入文件（JS腳本，CSS樣式）驶沼，那么此時(shí)瀏覽器的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載炮沐。
4. 下載后進(jìn)行文件的解析。解析過程中商乎，同時(shí)停止其位置以下所有元素的下載央拖。
5. 樣式表在下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析鹉戚，解析完成后鲜戒，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行渲染。
6. JS抹凳、CSS中如有重定義遏餐，后定義函數(shù)將覆蓋前定義函數(shù)。

第五條也就決定了CSS渲染過程中赢底，后面的規(guī)則將會(huì)覆蓋前面的規(guī)則失都，例如下圖：

后面的規(guī)則將會(huì)覆蓋前面的規(guī)則

而且在2-5條中也點(diǎn)明了CSS渲染效率的關(guān)鍵點(diǎn)：

1. css選擇器的查詢定位效率
2. 瀏覽器的渲染模式和算法
3. 要進(jìn)行渲染內(nèi)容的大小

我們很多關(guān)于CSS的優(yōu)化方案其實(shí)都是從這三個(gè)發(fā)面來著手的，具體的優(yōu)化原則將在本文的最后簡(jiǎn)單介紹幸冻。下面我們來看看CSS渲染工作原理粹庞；

在單獨(dú)的CSS文件中渲染順序是從上到下，依次渲染洽损。對(duì)于同一元素的的相同渲染屬性的值有差異的庞溜，后面的覆蓋前面的。單個(gè)CSS規(guī)則中的選擇器匹配順序不是習(xí)慣上的從左到右進(jìn)行查找碑定，而是從右到左進(jìn)行查找流码。比如說CSS規(guī)則div#divBox.red{color:red;}又官，瀏覽器的查找順序如下：先查找html中所有class=‘red’的元素，找到后漫试，再判斷該元素的父元素中是否有id為divBox的div元素六敬，如果都存在則CSS匹配上。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素驾荣。關(guān)于CSS的工作原理其實(shí)只有這么多外构，下面要看本文的重點(diǎn)——CSS選擇器。

CSS選擇器基礎(chǔ)

CSS屬性比較多秘车，靠專門的學(xué)習(xí)在短時(shí)間內(nèi)不可能全部掌握典勇，只能依靠日常的積累。但是CSS選擇器的知識(shí)就相對(duì)簡(jiǎn)單和集中一點(diǎn)叮趴。這一大段的內(nèi)容就是本文的重點(diǎn)——CSS選擇器。

CSS選擇器最主要的基礎(chǔ)選擇器权烧。

下面我們拿出幾個(gè)CSS規(guī)則來舉例子宫静，CSS規(guī)則div{color:red;}中的div就是標(biāo)簽選擇器，它的存在等于是改變了標(biāo)簽div的默認(rèn)樣式券时。CSS規(guī)則.nav{color:red;}中的.nav是類選擇器孤里，其特征就是前面有一個(gè)**.**。CSS規(guī)則#sidebar{color:red;}中的#sidebar是類選擇器橘洞，其特征就是前面有一個(gè)**#**捌袜，這也是和類選擇器的區(qū)別。

除了基礎(chǔ)選擇器之外常用的還有偽類選擇器和偽元素選擇器炸枣，關(guān)于偽類和偽元素的區(qū)別可以看老衲以前的文章《偽類與偽元素虏等，傻傻分不清楚》。例如常用的:hover{color:blue;}就是一個(gè)偽類選擇器适肠，它的作用就是當(dāng)鼠標(biāo)經(jīng)過時(shí)元素的樣式霍衫。當(dāng)然了偽類選擇器不是單單的只有這一個(gè)。

這些基礎(chǔ)選擇器只是我們建設(shè)龐大“前端建筑”的一些磚頭水泥侯养，要把這些“材料”組合起來就需要組合選擇器大展神威了敦跌。

因?yàn)榻M合選擇器比較好理解所以不再舉例了并级，這里面要提的是組合選擇器并不是只能寫兩層拂檩，第一段中的小朋友就是有這種誤解，認(rèn)為只能寫E>F這樣的嘲碧，其實(shí)我們寫可以寫E>F.class Element這樣稻励。不過在使用組合選擇器的時(shí)候，一定要注意優(yōu)先級(jí)的問題愈涩，關(guān)于優(yōu)先級(jí)在本文后面也會(huì)被提及望抽。

除了上面介紹的三種選擇器之外還高級(jí)的屬性選擇器，關(guān)于屬性選擇器的用法參見下表履婉。

CSS屬性選擇器實(shí)例

具體的用法不在本文中舉例了，我有一個(gè)仿別人的綜合性demo,我覺得它很全面的介紹了關(guān)于CSS選擇器的用法和效果草戈。具體地址是《CSS選擇器演示》塌鸯。

CSS選擇器優(yōu)先級(jí)*

CSS如何去渲染，誰(shuí)先渲染唐片，誰(shuí)后渲染丙猬。誰(shuí)的渲染有效，誰(shuí)的渲染無效费韭。這個(gè)被稱為CSS選擇器的優(yōu)先級(jí)茧球。CSS選擇器的優(yōu)先級(jí)看起來很簡(jiǎn)單，其實(shí)并沒有那么簡(jiǎn)單星持。我們都知道CSS樣式有四種存放方式：

1. 外部樣式：通過link標(biāo)簽引入CSS樣式抢埋；
2. 內(nèi)頁(yè)樣式：寫在HTML頁(yè)面里面的style標(biāo)簽里面；
3. 行內(nèi)樣式：寫在對(duì)應(yīng)標(biāo)簽的style屬性里面。
4. @import url引入樣式：CSS代碼的代碼片段中引入另外的樣式文件揪垄。

最后一種@import url一般不推薦使用穷吮，前三種方式的優(yōu)先級(jí)是：行內(nèi)樣式＞內(nèi)頁(yè)樣式＞外部樣式。不過這樣比較優(yōu)先級(jí)的意義不大饥努，因?yàn)槟壳八械臉邮蕉际鞘褂猛獠繕邮郊裼恪６谕粋€(gè)CSS文件中的權(quán)重優(yōu)先級(jí)可以參加下表：

• 不同級(jí)別中的優(yōu)先級(jí)順序

1. 在屬性后面使用 !important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
2. 作為style屬性寫在元素內(nèi)的行內(nèi)樣式
3. id選擇器
4. 類選擇器
5. 標(biāo)簽|偽類|屬性選擇器
6. 偽元素選擇器
7. 選擇器繼承
8. 通配符選擇器
9. 瀏覽器自定義

• 同一級(jí)別的優(yōu)先級(jí)順序

1. 同一級(jí)別中后寫的會(huì)覆蓋先寫的樣式

其實(shí)造成這樣的優(yōu)先級(jí)的原因是因?yàn)槲覀兘o他們賦予了不同的權(quán)重值：

• important的權(quán)重為1,0,0,0(1000)
• ID的權(quán)重為0,1,0,0(100)
• 類的權(quán)重為0,0,1,0(10)
• 標(biāo)簽的權(quán)重為0,0,0,1(1)
• 偽類的權(quán)重為0,0,1,0(10)
• 屬性的權(quán)重為0,0,1,0(10)
• 偽對(duì)象的權(quán)重為0,0,0,1(1)
• 通配符的權(quán)重為0,0,0,0
• 繼承的權(quán)重比較特殊為0.1

有了這些權(quán)重值的存在酷愧，才能讓我們的組合選擇器有了不通的呈現(xiàn)效果驾诈；

/*CSS選擇器權(quán)重*/
p{color:red;}  /*標(biāo)簽，權(quán)值為1*/

p span{color:green;}  /*兩個(gè)標(biāo)簽溶浴，權(quán)值為1+1=2*/

p>span{color:purple;}/*權(quán)值與上面的相同乍迄，因此采取就近原則*/

.warning{color:white;}  /*類選擇符，權(quán)值為10*/

p span.warning{color:purple;}  /*權(quán)值為1+1+10=12*/

#footer .note p{color:yellow;}  /*權(quán)值為100+10+1=111*/

這些就是優(yōu)先級(jí)的計(jì)算方法士败，具體CSS優(yōu)先級(jí)怎么會(huì)影響到渲染結(jié)果闯两，我估計(jì)你也是一臉懵逼，看一張圖谅将，就能明白優(yōu)先級(jí)對(duì)渲染結(jié)果的影響了生蚁。圖中已經(jīng)有示例的所有源碼了，建議自己再試驗(yàn)體會(huì)一下戏自。

CSS優(yōu)先級(jí)對(duì)渲染結(jié)果

CSS優(yōu)先級(jí)高的獲得了渲染權(quán)限所以em標(biāo)簽內(nèi)的顏色是權(quán)重比較高的CSS規(guī)則的結(jié)果——即藍(lán)色。

關(guān)于優(yōu)先級(jí)有一種很有趣的情況伤锚，就是用JS來對(duì)DOM文件進(jìn)行操作而產(chǎn)生CSS樣式擅笔，會(huì)因?yàn)g覽器的差異而呈現(xiàn)不同的渲染結(jié)果。這個(gè)我也只是看到過相關(guān)的文章并沒有具體的試驗(yàn)來驗(yàn)證屯援。有機(jī)會(huì)的話我應(yīng)該會(huì)寫一篇文章來專門討論這個(gè)問題猛们。

不知不覺已經(jīng)寫了很多，但是關(guān)于CSS的知識(shí)還有一點(diǎn)沒有介紹完狞洋。而且我也覺得上面介紹的不是很詳細(xì)弯淘。再多說一次，關(guān)于具體選擇器的用法和渲染效果多看下我的DEMO《CSS選擇器演示》可能會(huì)有不錯(cuò)的收獲吉懊。

個(gè)人覺得目前為止寫下的文字已經(jīng)遠(yuǎn)遠(yuǎn)的超出了本文題目的范圍庐橙，因?yàn)檫@些不再是基礎(chǔ)的范疇——已經(jīng)幾乎是關(guān)于CSS選擇器方面的所有知識(shí)了。覺得有必要可以停筆了借嗽，想了下态鳖，還是把這篇臭長(zhǎng)的文章給做一個(gè)完結(jié)吧。

書寫規(guī)則及優(yōu)化原則

CSS的書寫順序恶导，會(huì)影響到渲染效率和我們閱讀代碼的效率浆竭。正確的書寫順序也能達(dá)到CSS優(yōu)化的效果，看了一篇“歪果仁”寫的關(guān)于CSS的書寫順序。我貼出來共同學(xué)習(xí)下邦泄。

1. 位置屬性(position, top, right, z-index, display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing, color- text-align等)
4. 背景(background, border等)
5. 其他(animation, transition等)

正確的CSS的書寫規(guī)則也能精簡(jiǎn)代碼并提高閱讀體驗(yàn)删窒。配合前人的經(jīng)驗(yàn)和個(gè)人的經(jīng)驗(yàn)，我列了個(gè)表：

1. 使用CSS縮寫屬性顺囊。例如padding肌索、background等。
2. 去掉小數(shù)點(diǎn)前的“0”包蓝。例如0.3em可以簡(jiǎn)稱成.3em驶社。
3. 簡(jiǎn)寫命名(約定俗成的可以簡(jiǎn)寫)。例如.nav测萎。
4. 16進(jìn)制顏色代碼縮寫亡电。例如#fff。
5. 不要隨意使用id選擇器硅瞧。
6. 使用連字符“-”連接選擇器長(zhǎng)命名份乒。
7. 為選擇器添加狀態(tài)前綴。
8. 合理利用CSS樣式繼承規(guī)則腕唧。
9. 避免過于緊湊的約束條件或辖。例如：.nav ul li可以寫成.nav li

關(guān)于CSS優(yōu)化我在前文已經(jīng)說明了有幾個(gè)著手點(diǎn)，例如CSS Sprite技術(shù)可以減少http請(qǐng)求達(dá)到優(yōu)化的目的枣接，在此不過多說明颂暇，在我們理解原理的前提下，多使用工具也是提高工作效率的手段之一但惶。CSS Lint就是一款比較優(yōu)秀的CSS優(yōu)化檢測(cè)工具耳鸯。它除了能發(fā)現(xiàn)CSS書寫問題外，還能提升CSS的性能膀曾。它的工作原理基于一定的規(guī)則和標(biāo)準(zhǔn)县爬。關(guān)于規(guī)則有一篇很優(yōu)秀的博客介紹過，但是我這邊打不開這篇文章添谊。萬幸的是有人轉(zhuǎn)載過财喳，我也懶省事直接剪貼過來吧。

修復(fù)解析錯(cuò)誤（Parsing errors should be fixed）
避免使用多類選擇符（Don’t use adjoining classes）
IE6以及更古老的瀏覽器對(duì)類似.foo.bar的多類選擇符解析不正確斩狱，參考IE6下的多類選擇符一文耳高。

移除空的css規(guī)則（Remove empty rules）
這個(gè)規(guī)則不包含任何屬性，類似：.foo { }空規(guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式喊废。去除這些空規(guī)則無疑能減少css文檔體積祝高。

正確使用display的屬性（Use correct properties for a display）
由于display的作用，某些樣式組合會(huì)無效污筷，徒增樣式體積的同時(shí)也影響解析性能工闺。CSS Lint會(huì)檢查一下幾點(diǎn)：
display:inline后不應(yīng)該再使用width乍赫、height、margin陆蟆、padding以及float雷厂。
display:inline-block后不應(yīng)該再使用float。
display:block后不應(yīng)該再使用vertical-align叠殷。
display:table-*后不應(yīng)該再使用margin或者float改鲫。

不濫用浮動(dòng)（Don’t use too many floats）
雖然浮動(dòng)不可避免，但不可否認(rèn)很多css bug是由于浮動(dòng)而引起林束。CSS Lint一旦檢測(cè)出樣式文件中有超過10次的浮動(dòng)便會(huì)提示警告像棘。

不濫用web字體（Don’t use too many web fonts）
對(duì)于中文網(wǎng)站來說Web Fonts可能很陌生，國(guó)外卻很流行壶冒。web fonts通常體積龐大缕题，而且一些瀏覽器在下載web fonts時(shí)會(huì)阻塞頁(yè)面渲染損傷性能。

不聲明過多的font-size（Don’t use too may font-size declarations）
這是設(shè)計(jì)層面的問題胖腾，設(shè)計(jì)精良的頁(yè)面不會(huì)有過多的font-size聲明烟零。

不在選擇符中使用ID標(biāo)識(shí)符（Don’t use IDs in selectors）
主要考慮到樣式重用性以及與頁(yè)面的耦合性。

不給h1~h6元素定義過多的樣式（Don’t qualify headings）
全站統(tǒng)一定義一遍heading元素即可咸作，若需額外定制樣式锨阿，可使用其他選擇符作為代替。

不重復(fù)定義h1~h6元素（Heading styles should only be defined once）

值為0時(shí)不需要任何單位（Zero values don’t need units）

標(biāo)準(zhǔn)化各種瀏覽器前綴（Vendor prefixed properties should also have the standard）
通常將瀏覽器前綴置于前面记罚，將標(biāo)準(zhǔn)樣式屬性置于最后墅诡，類似：
.foo {-moz-border-radius: 5px;border-radius: 5px; }

使用CSS漸變等高級(jí)特性，需指定所有瀏覽器的前綴（CSS gradients require all browser prefixes）

避免讓選擇符看起來像正則表達(dá)式（Avoid selectors that look like regular expressions）
CSS3添加了一些類似~=等復(fù)雜屬性桐智，也不是所有瀏覽器都支持书斜，需謹(jǐn)慎使用。

遵守盒模型規(guī)則（Beware of broken box models）

里面有些規(guī)則在前面的書寫規(guī)則中也有提及酵使，但是我覺得他的更為全面一些。

好吧焙糟，我覺得應(yīng)該也差不多了口渔，以后再來做修改吧。我要閃了……

全文完~