Web開發學習心得3——CSS的文法與層疊

 

這篇主要討論CSS的文法及層疊的概念，有關CSS布局方面的內容下篇討論。

如前兩篇文章所述，CSS是專門用來負責文檔的展現的，那既然如此，CSS就一定能夠控制每種元素的展現，於是，就有了第一類文法——元素選擇符。

元素選擇符文法如下：

element

{

         樣式規則

}

這個非常好理解，所謂元素選擇符，就是說文檔中所有該元素，都以該樣式規則顯示。

非常好，有了元素選擇符，就能夠很大程度上控制文檔的展現了。然而，人們很快就碰到了新的問題：我有兩個相同的元素，但是我希望兩個元素以不同的樣式展現。為了滿足該要求，於是，就有了第二類文法——類選擇符。

類選擇符文法如下：

.class（注意class前面的小數點）

{

         樣式規則

}

該選擇符表示，所有屬於該類的元素都以該樣式規則展現。那麼，什麼叫屬於該類，怎麼樣才屬於該類呢？這就需要元素添加一個“class”屬性，並將屬性值指定為該類選擇符名。

有了這些，就能指定文檔中任何元素的樣式了。然而，人們發現，文檔中常常會包含某些唯一的區塊，如頁首、頁尾等，這些區塊的樣式常常只允許應用到該唯一的區塊，雖然可以用類選擇符來實現（給該區塊一個不同於頁面其他元素的唯一的類名），但是，如果有專門的文法來實現這種唯一，那無疑能使CSS更清晰。於是，就有了第三類文法——id選擇符。

id選擇符文法如下：

#id（注意id前面的#號）

{

         樣式規則

}

該選擇符表示，該id的元素以該樣式規則展現。id選擇符需要元素添加一個“id”屬性，並給予唯一的名字作為屬性值，即同一文檔不允許有兩個或以上的元素擁有相同的id值。

以上3種選擇符，就構成了CSS最基本的文法。基於這3種選擇符，又衍生出一些其他的規則，撿一些常見的簡單說明如下：

“選擇符1 選擇符2”（注意空格分隔字元）：表示選擇符1下的所有子孫選擇符2。如“p .red”表示元素選擇符p的子孫中類名為red的所有元素。

“選擇符1>選擇符2”（注意大於符號分隔字元：表示選擇符1下的所有兒子選擇符2（注意只限於兒子）。如“p>.red”表示元素選擇符p的兒子中類名為red的所有元素。

“選擇符1類選擇符2”（注意選擇符之間緊挨）：表示選擇符1中所有屬於類選擇符2的元素。如“p.red”表示<p>元素中屬於red的所有元素。

“選擇符1id選擇符2”（注意選擇符之間緊挨）：表示選擇符1中id為選擇符2的元素。如“p#red”表示<p>元素中id為red的元素。

另外，如果兩個選擇符的樣式規則一樣，可以簡寫為“選擇符1，選擇符2”（注意逗號分隔字元），如“p，.red”表示元素選擇符p與類選擇符.red擁有同樣的樣式。

 

瞭解了CSS的規則之後，我們再來講講層疊的概念。

所謂層疊，就是指子孫元素繼承祖先元素的樣式屬性的行為，大部分的屬性都能繼承，但也有部分屬性不能繼承，如padding，margin，float等。這個就不多說了，這裡主要講講在一個元素的一個樣式屬性被多個選擇符選擇的時候，如何判斷最終應用哪個屬性值的問題。

《Head First HTML and CSS XHTML》中講到一種方法是這樣的：根據選擇符計算出一個數字，數字最大的那個就是最終要應用的樣式，如果存在多個相同的最大值，那麼取位置最後面的那個。

那麼怎麼根據選擇符來計算那個數字呢？方法如下：

如果選擇符中包含元素選擇符，那麼就給那個數字加1，有幾個元素選擇符，就加幾個1；

如果選擇符中包含類選擇符，那麼就給那個數字加10，有幾個類選擇符，就加幾個10；

如果選擇符中包含id選擇符，那麼就給那個數字加100，有幾個id選擇符，就加幾個100。

我們來舉幾個具體的例子：

p	.red	#header	p.red	p#header	p img	ul li p	#go p.red
001	010	100	011	101	002	003	111

注意，以逗號隔開的選擇符並不能將其當作一個整體來計算，而要拆開分別計算。如p, .red，它相當於一個p（001）和一個.red（010），而不是整體011。

另外，10個元素選擇符並不頂一個類選擇符，10個類選擇符也不頂一個id選擇符，實際上，任意多個元素選擇符都不頂一個類選擇符，任務多個類選擇符也不頂一個id選擇符。以上規則可以用如下通俗的方式描述：首先比較id選擇符的個數；其次比較類選擇符的個數；再其次比較元素選擇符的個數；最後，如果3者都相等，那麼取靠後定義的那個。