手寫樣式表：CSS文法全攻略(1)

css|攻略|樣式表|文法

放棄可視化編輯器寫CSS

如果有看上篇的例子的CSS時，你可能會問，我在DW中要怎樣做才能有像下面這樣的CSS呢？
.test1,.test2 {color:Purple !important;color:blue;}

手寫，在DW也有代碼區，而且是有智能提示的，等於半手動寫，本人一直用TopStyle，除了對中文的支援不是很好外，各方面都不錯。在學C#的那段時間，發現VS.NET寫CSS也很不錯，就是有點大。

為什麼不能用可視化編輯器寫CSS呢？理由很簡單，手寫CSS可以寫很多可視化編輯器寫不出的樣式，剛開始手寫可能會不大習慣，可是配合智能提示，寫熟了是不會比可視化編輯器點的慢。

想學好CSS就要學會接受各種瀏覽器的虐待（當然做某些特定只要針對只有IE使用者的網站例外），在接受瀏覽器的虐待的第一步是放棄可視化編輯器。如果不能放棄，後面的很多東西你就只能看看。

各種類型的選擇符
為什麼要出現不同的選擇符呢？個人認為是主是模組化跟重用性。
下面的Element表示元素。

通配選擇符
*
像很多語言一樣 * 代表所有，一般開始我會在一個CSS的開始時做下面這樣的定義：這樣定義是把所有的元素的margin跟padding定義為0。例子
* {margin:0; padding:0;}

* 也是可以像下面這樣用的：把div元素下的所有元素定義。
div * {color:#94439F; }

這樣定義時要小心應用，像下面這樣的定義是用乘的。例子
ul * {font-size:120%; }
所以大家在用通配選擇符出現百分比的定義時要小心。

類型選擇符
Element
這個是大家最最常用的吧，說Element可能大家不會知道，看下面的。例子
p {color:blue;}

當然有時 HTML 也搞搞特別的，自訂元素是其中的一種，例子
rotui\:aoao {color:#123456;}

包含選擇符 也有人叫派生選擇符
Element1 Element2
像剛才的顯著 div * 就是，當然還可以像下面這樣。例子
p strong {color:blue;}

子物件選擇符
Element > Element
這個跟包含選擇符有什麼不同呢？他只對他的子一級元素有效（IE6還不支援）。例子
p > span { color:red;}

相鄰選取器
Element + Element
只對相鄰的元素，也就是下一個元素的定義（IE6還不支援）。例子
p + p { border:1px red solid;}

ID選擇符
#IDName
Element#IDName
直接定義HTML的ID名。例子
#csser { border :1px #000 solid;}

類選擇符
.className
Element.className
這兩個有什麼不同呢，前一個是定義所有class="className"。例子
.rotui { border:1px #000 solid;}

屬性選擇符
Element[attr]
Element[attr=value]
Element[attr~=value]
Element[attr|=value]
Element[attr] 選擇具有attr屬性的E1 例子
input[value] {border:1px #000 solid;}

Element[attr=value]選擇具有attr屬性且屬性值等於value的元素 例子
input[type=password] {border:1px red solid;}

Element[attr~=value]選擇具有attr屬性且屬性值為一用空格分隔的字詞列表，其中一個等於value的Element。這裡的value不能包含空格 例子
input[value~="aoao"] {color:red;}

Element[attr|=value] 選擇具有attr屬性且屬性值為一用連字號（-）分隔的字詞列表，必須是以value開始的元素。 例子
input[value|="rotui"] {color:blue;}

PS:以上的IE瀏覽器看不到.

選擇符分組
Element1,Element2
將同樣的定義應用於多個選擇符，可以將選擇符以逗號分隔的方式並為組。不只只是元素，上面所說的八類選擇符跟下面的都可以應用 。例子
th,td {color::1px red solid;}

偽類選擇符
Element:link
Element:visited
Element:hover
Element:active
Element:focus
Element:first-child
Element:lang
當然還有定義列印的:first :left :right，這裡只介紹螢幕上的。例子:link,:visited,:hover,:active 這四類是常見到的，因為IE的 a 元素支援他。 例子:focus 對象在成為輸入焦點（該對象的onfocus事件發生）時出現（IE不支援）。例子

input:focus {color:blue;}
:first-child 包含選擇符裡面的第一個元素的定義。例子div p:first-child {background-color :#ccc;}
:lang() 對已指明語言的元素進行定義。例子p:lang(en) {color :Blue;}

偽對象
Element:first-letter
Element:first-line
Element:before
Element:after
:first-letter 首字定義，很好理解，就是第一個字。例子
.letter:first-letter {font-size :300%;}

:first-line 首行定義，第一行會有效果，分行符號（<br />）也可以分割第一行。例子 .letter:first-line {color:red;}

:before和:after 在元素之前（before）跟之後（after）配合 content屬性新增內容。例子
em:before {content:"我來自CSS";}
em:after {content:"我也是CSS裡出來的";}

選擇符的優先權
那樣多個選擇符，我怎知道哪個優先權高呢？上一篇只講到 important 提高優先權，現在再說說選擇符的優先權，old9兄的blog已經有了一篇講到，這裡引用一下，也好偷下懶首先就是CSS規則的specificity(特殊性)，CSS2.1有一套關於specificity的計算方式，用一個四位的數字串(CSS2是三位)來表示，最終specificity越高的規則越特殊，在優先順序判定時也就越有優勢。關於specificity的具體計算在各種情況下的數字加成有如下一般規則：

每個ID選擇符(#someid)，加 0,1,0,0。 每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=”"]等)、每個偽類(形如:hover等)加0,0,1,0
每個元素或虛擬元素(:firstchild)等，加0,0,0,1 其他選擇符包括全域選擇符*，加0,0,0,0。相當於沒加，不過這也是一種specificity，後面會解釋。 舉一些例子吧：

h1 {color: red;}
/* 只有一個普通元素加成，結果是 0,0,0,1 */
body h1 {color: green;}
/* 兩個普通元素加成，結果是 0,0,0,2 */
——後者勝出
 
h2.grape {color: purple;}
/* 一個普通元素、一個class選擇符加成，結果是 0,0,1,1*/
h2 {color: silver;}
/*一個普通元素，結果是 0,0,0,1 */
——前者勝出
 
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7個普通元素、一個屬性選擇符、兩個其他選擇符，結果是0,0,1,7 */
li#answer {color: navy;}
/* 一個ID選擇符，一個普通選擇符，結果是0,1,0,1 */
——後者勝出
除了specificity還有一些其他規則

文內的樣式優先順序為1,0,0,0，所以始終高於外部定義。這裡文內樣式指形如<div style=”color: red”>blah</div>的樣式，而外部定義指經由<link>或<style>標籤定義的規則。
有!important聲明的規則高於一切。
如果!important聲明衝突，則比較優先權。
如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。
由繼承而得到的樣式沒有specificity的計算，它低於一切其他規則(比如全域選擇符*定義的規則)。
關於經由@import載入的外部樣式，由於@import必須出現在所有其他規則定義之前(如不是，則瀏覽器應該忽略之)，所以按照後來居上原則，一般優先權衝突時是佔下風的。
這裡需要提一下IE，IE是可以識別位置錯誤的@import的，但無論@import在什麼地方，它都認為是位於所有其他規則定義之前的，這可能會引發一些誤會。
看來一篇寫不完了，屬性留在下篇再說吧（這年頭多混個頁的流量也不容易） ！