放棄可視化編輯器寫CSS
如果有看上篇的例子的CSS時，你可能會問，我在DW中要怎樣做才能有像下面這樣的CSS呢？
.test1,.test2 {color:Purple !important;color:blue;}
手寫，在DW也有代碼區(qū)，而且是有智能提示的，等于半手動寫，本人一直用TopStyle，除了對中文的支持不是很好外，各方面都不錯。在學(xué)C#的那段時間，發(fā)現(xiàn)VS.NET寫CSS也很不錯，就是有點大。
為什么不能用可視化編輯器寫CSS呢？理由很簡單，手寫CSS可以寫很多可視化編輯器寫不出的樣式，剛開始手寫可能會不大習(xí)慣，可是配合智能提示，寫熟了是不會比可視化編輯器點的慢。
想學(xué)好CSS就要學(xué)會接受各種瀏覽器的虐待（當(dāng)然做某些特定只要針對只有IE用戶的網(wǎng)站例外），在接受瀏覽器的虐待的第一步是放棄可視化編輯器。如果不能放棄，后面的很多東西你就只能看看。
各種類型的選擇符
為什么要出現(xiàn)不同的選擇符呢？個人認為是主是模塊化跟重用性。
下面的Element表示元素。
通配選擇符
*
像很多語言一樣 * 代表所有，一般開始我會在一個CSS的開始時做下面這樣的定義：這樣定義是把所有的元素的margin跟padding定義為0。例子
* {margin:0; padding:0;}
* 也是可以像下面這樣用的：把div元素下的所有元素定義。
div * {color:#94439F; }
這樣定義時要小心應(yīng)用，像下面這樣的定義是用乘的。例子
ul * {font-size:120%; }
所以大家在用通配選擇符出現(xiàn)百分比的定義時要小心。
類型選擇符
Element
這個是大家最最常用的吧，說Element可能大家不會知道，看下面的。例子
p {color:blue;}
當(dāng)然有時 HTML 也搞搞特別的，自定義元素是其中的一種，例子
rotui\:aoao {color:#123456;}
包含選擇符 也有人叫派生選擇符
Element1 Element2
像剛才的顯著 div * 就是，當(dāng)然還可以像下面這樣。例子
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
將同樣的定義應(yīng)用于多個選擇符，可以將選擇符以逗號分隔的方式并為組。不只只是元素，上面所說的八類選擇符跟下面的都可以應(yīng)用 。例子
th,td {color::1px red solid;}
偽類選擇符
Element:link
Element:visited
Element:hover
Element:active
Element:focus
Element:first-child
Element:lang
當(dāng)然還有定義打印的:first :left :right，這里只介紹屏幕上的。例子:link,:visited,:hover,:active 這四類是常見到的，因為IE的 a 元素支持他。 例子:focus 對象在成為輸入焦點（該對象的onfocus事件發(fā)生）時出現(xiàn)（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屬性添加內(nèi)容。例子
em:before {content:"我來自CSS";}
em:after {content:"我也是CSS里出來的";}
選擇符的優(yōu)先權(quán)
那樣多個選擇符，我怎知道哪個優(yōu)先權(quán)高呢？上一篇只講到 important 提高優(yōu)先權(quán)，現(xiàn)在再說說選擇符的優(yōu)先權(quán)，old9兄的blog已經(jīng)有了一篇講到，這里引用一下，也好偷下懶首先就是CSS規(guī)則的specificity(特殊性)，CSS2.1有一套關(guān)于specificity的計算方式，用一個四位的數(shù)字串(CSS2是三位)來表示，最終specificity越高的規(guī)則越特殊，在優(yōu)先級判定時也就越有優(yōu)勢。關(guān)于specificity的具體計算在各種情況下的數(shù)字加成有如下一般規(guī)則：
每個ID選擇符(#someid)，加 0,1,0,0。 每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=”"]等)、每個偽類(形如:hover等)加0,0,1,0
每個元素或偽元素(:firstchild)等，加0,0,0,1 其他選擇符包括全局選擇符*，加0,0,0,0。相當(dāng)于沒加，不過這也是一種specificity，后面會解釋。 舉一些例子吧：
h1 {color: red;}
/* 只有一個普通元素加成，結(jié)果是 0,0,0,1 */
body h1 {color: green;}
/* 兩個普通元素加成，結(jié)果是 0,0,0,2 */
——后者勝出
h2.grape {color: purple;}
/* 一個普通元素、一個class選擇符加成，結(jié)果是 0,0,1,1*/
h2 {color: silver;}
/*一個普通元素，結(jié)果是 0,0,0,1 */
——前者勝出
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7個普通元素、一個屬性選擇符、兩個其他選擇符，結(jié)果是0,0,1,7 */
li#answer {color: navy;}
/* 一個ID選擇符，一個普通選擇符，結(jié)果是0,1,0,1 */
——后者勝出
除了specificity還有一些其他規(guī)則
文內(nèi)的樣式優(yōu)先級為1,0,0,0，所以始終高于外部定義。這里文內(nèi)樣式指形如<div style=”color: red”>blah</div>的樣式，而外部定義指經(jīng)由<link>或<style>標(biāo)簽定義的規(guī)則。
有!important聲明的規(guī)則高于一切。
如果!important聲明沖突，則比較優(yōu)先權(quán)。
如果優(yōu)先權(quán)一樣，則按照在源碼中出現(xiàn)的順序決定，后來者居上。
由繼承而得到的樣式?jīng)]有specificity的計算，它低于一切其他規(guī)則(比如全局選擇符*定義的規(guī)則)。
關(guān)于經(jīng)由@import載入的外部樣式，由于@import必須出現(xiàn)在所有其他規(guī)則定義之前(如不是，則瀏覽器應(yīng)該忽略之)，所以按照后來居上原則，一般優(yōu)先權(quán)沖突時是占下風(fēng)的。
這里需要提一下IE，IE是可以識別位置錯誤的@import的，但無論@import在什么地方，它都認為是位于所有其他規(guī)則定義之前的，這可能會引發(fā)一些誤會。
看來一篇寫不完了，屬性留在下篇再說吧（這年頭多混個頁的流量也不容易） ！
粵公網(wǎng)安備 44010402000282號