CSS布局探密03

下面是一段普通的代碼:

css:

.box{

border:1px solid #ccc;

font-size:12px;

background:#F1F1F1;

padding:10px;

}

html：

但是這個時候需求增加了，在頁面中不僅要有一個灰色的盒子可能還有藍色的盒子，可能還有綠色（僅僅顔色不同，其他屬性一樣）.

通常我們會想到：用群組選擇器，把有相同定義的不同選擇器放在一起，省了很多代碼（其實就是一種簡寫）。好我們就做如下更改：

css:

.box-gray,

.box-green{

border:1px solid #ccc;

font-size:12px;

padding:10px;

}

.box-gray{background:#F1F1F1}

.box-green{background:#66FF66}

html：

<div class="box-green">this is a green box</div>

但是這個時候需求又有變化了，根與應用的不同，盒子中有些要用到12号字，有些要用到14号字，有些要變局10px有些要20px，估計這個時候你就要頭大了，用上面的方法來實作這個需求已經不再那麼簡練了，css代碼會變得異常的複雜，那我們就來試驗一下用組合的方式看能不能解決。

css:

.fs-12{font-size:12px}

.fs-14{font-size:14px}

.pd-10{padding:10px}

.pd-20{padding:20px}

.box{border:1px solid #ccc;}

.box.gray{background:#f1f1f1}

.box.green{background:#66ff66}

Html

<div class="box gray fs-12 pd-20">this a gray fontsize12px padding20px box</div>

<div class="box green fs-14 pd-10">this a gray fontsize14px padding10px box</div>

雖然在class上組合了好幾個類，但是代碼和邏輯都非常清晰，而且非常容易維護，随意組合随意擴充。從上面可以看到“組合”方式的優點是不言而喻的，但也不是十全十美，在拆分組合的時候一定不要過度，不然效果可能适得其反，每一個知識點要使用的恰到好處，和有效的組合起來才能讓我們的代碼更加優雅和藝術。

上面的樣式用到了類選擇器，下面就來看看CSS中幾個常用的選擇器：

類選擇器

在 CSS 中，類選擇器以一個點号顯示：

.center {text-align: center}

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味着兩者都将遵守 ".center" 選擇器中的規則。

This heading will be center-aligned

</h1>

This paragraph will also be center-aligned.

</p>

注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用

ID選擇器

id 選擇器可以為标有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器，第一個可以定義元素的顔色為紅色，第二個定義元素的顔色為綠色：

#red {color:red;}

#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p>

<p id="green">這個段落是綠色。</p>

注意：id 屬性隻能在每個 HTML 文檔中出現一次。

派生選擇器

通過依據元素在其位置的上下文關系來定義樣式，通過合理地使用派生選擇器，可以使标記更加簡潔（每個标簽用空格隔開）。

比方說，你希望清單中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

li strong {

font-style: italic;

font-weight: normal;

}

請注意标記為 <strong> 的藍色代碼的上下文關系：

<p><strong>我是粗體字，不是斜體字，因為我不在清單當中，是以這個規則對我不起作用</strong></p>
<ol>
         <li><strong>                我是斜體字。這是因為 strong 元素位于 li 元素内。         </strong></li>                
<li>我是正常的字型。</li>
</ol>

在上面的例子中，隻有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特别的 class 或 id，代碼更加簡潔。

再看看下面的 CSS 規則：

strong {
     color: red;
     }

h2 {
     color: red;
     }

         h2 strong                 {
     color: blue;
     }

下面是它施加影響的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
         <h2>                The strongly emphasized word in this subhead is         <strong>                blue         </strong>                .         </h2>

另外css有“優先級”的問題，即是指CSS樣式在浏覽器中被解析的先後順序，優先級低的先解析，優先級高的後解析，後解析的覆寫先解析的（後來居上）。

那麼這就存在一個優先級高低的判斷問題，其實是有這麼一個規律的：

一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準确，它的優先級就越高。通常我們用1表示标簽名選擇器的優先級，用10表示類選擇器的優先級，用100标示ID選擇器的優先級。

例子：

<div class="polaris">
<span class="beijixing">
beijixing
</span>
<span>
polaris
</span>
</div>

如果通過.polaris span {color:red;} 把.polaris下面span内的字型設定成紅色，這時，如果要改變.beijixing的顔色為藍色，用下面的指令是不能實作的：

.beijixing {color:blue;}

出現這種情況就是因為後一個指令的優先級較前一個指令的優先級低，後一個指令先執行，再執行前一個指令導緻的。

比如上例當中 .polaris span {color:red;}的選擇器優先級是 10 + 1 也就是11；而 .polaris 的優先級是10；浏覽器自然會顯示紅色的字。

正因為有了優先級這個概念，在考慮選擇器時要做到：

第一：準确的定位要控制的标簽；

第二：使用最合理優先級的選擇器；

第三：HTML和CSS代碼盡量簡潔美觀。

派生選擇器的定位原則（該原則設計到比對的效率，就是查找到符合該css聲明中選擇器對應的html标簽的速度）

在這裡介紹一下對于派生選擇器，浏覽器是如何查找元素的呢？

浏覽器CSS比對不是從左到右進行查找，而是從右到左進行查找。比如DIV#divBox p span.red{color:red;}，浏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則比對上。

浏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。比如如下html和css:

<style>
DIV#divBox p span.red{color:red;}
><style>
<body>
<div id="divBox">
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class='red'>s4</span></p>
</div>
</body>

如果按從左到右查找，哪會先查找到很多不相關的p和span元素。而如果按從左到右的方式進行查找，則首先就查找到<span class='red'>的元素。firefox稱這種查找方式為key selector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的key就是span.red。

對于派生層級關系，盡量做到簡練，不要做不必要的比對，以提高效率，和可讀性。

如：不要在ID選擇器前使用标簽名

一般寫法：DIV#divBox

更好寫法：#divBox

解釋：因為ID選擇器是唯一的，加上div反而增加不必要的比對。(擴充了解：)。

最後有一點要注意：CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

附網上另外的一些總結：

1.派生選擇器是CSS裡最昂貴的選擇器，昂貴得可怕——特别是當它放在标簽和通用符後面時。就如下面這個東東一樣，絕對的效率毒瘤：

html body ul li a { }

2.一個選擇器渲染失敗比這個選擇器被渲染更高效

我不是很确定是否有更好的證據去證明這一點，因為如果你有大量的選擇器在CSS樣式表裡無法找到，這樣的事情貌似很離奇，但一點必需注意的是，從右到左的解釋一個選擇器來說，一旦它找不到，那它就會停止嘗試。然而如果它找到了，那它就需要花更多精力去解釋了。

試想一下為何你這樣寫選擇器

思考下這東東：

#main-navigation li a { font-family: Georgia, Serif; }

你可能不需要從 a 選擇器開始（如果你隻是想換個字型）。下面這個可能更高效些：

#main-navigation { font-family: Georgia, Serif; }

我的了解：僅僅想改變#main-navigation下的li的a的字型，按圖索骥的描述層級關系固然沒錯，但太固執了忽略了效率。