這篇主要討論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」表示元素中屬於red的所有元素。
「選擇符1id選擇符2」（注意選擇符之間緊挨）：表示選擇符1中id為選擇符2的元素。如「p#red」表示元素中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
注意，以逗號隔開的選擇符並不能將其當作乙個整體來計算，而要拆開分別計算。如p, .red，它相當於乙個p（001）和乙個.red（010），而不是整體011。
另外，10個元素選擇符並不頂乙個類選擇符，10個類選擇符也不頂乙個id選擇符，實際上，任意多個元素選擇符都不頂乙個類選擇符，任務多個類選擇符也不頂乙個id選擇符。以上規則可以用如下通俗的方式描述：首先比較id選擇符的個數；其次比較類選擇符的個數；再其次比較元素選擇符的個數；最後，如果3者都相等，那麼取靠後定義的那個。
2017 7 23 學習心得 css3
1 顏色 透明 opacity 父元素透明，子元素也會透明 transparent 完全透明 2 rgba hsla backgroud color rgba 0,155,255 backgroud color hsla 100,50 50 1 rgba red green blue 0 255 a...
CSS3 HTML5學習心得
1.字串 str.charat 字串索引 若索引超過字串長度，返回空。str.indexof 某字元 找到這個字元順序第一次出現的索引。str.lastindexof 某字元 找到某字串倒序最後出現的索引，若沒有返回 1。str.uppercase 將str轉換為大寫。str.lowercase 將...
從零開始學習前端開發 3 CSS盒模型
css盒模型是css的基石，每個html標籤都可以看作是乙個盒模型。css盒模型是由內容 content 補白或填充 padding 邊框 border 外邊距 margin 四部分組成 1.內容 content 寬度 width 數值 單位 高度 height 數值 單位 eg box 2.補白或...