為什麼不能用視覺化編輯器寫css呢？理由很簡單，手寫css可以寫很多視覺化編輯器寫不出的樣式，剛開始手寫可能會不大習慣，可是配合智慧型提示，寫熟了是不會比視覺化編輯器點的慢。
各種型別的選擇符
為什麼要出現不同的選擇符呢？個人認為是主是模組化跟重用性。
下面的element表示元素。
通配選擇符
*像很多語言一樣 * 代表所有，一般開始我會在乙個css的開始時做下面這樣的定義：這樣定義是把所有的元素的margin跟padding定義為0。例子
* * 也是可以像下面這樣用的：把div元素下的所有元素定義。
div *
這樣定義時要小心應用，像下面這樣的定義是用乘的。例子
ul *
所以大家在用通配選擇符出現百分比的定義時要小心。
型別選擇符
element
這個是大家最最常用的吧，說element可能大家不會知道，看下面的。例子
p 當然有時 html 也搞搞特別的，自定義元素是其中的一種，例子
rotui/:aoao
包含選擇符 也有人叫派生選擇符
element1 element2
像剛才的顯著 div * 就是，當然還可以像下面這樣。例子
p strong
子物件選擇符
element > element
這個跟包含選擇符有什麼不同呢？他只對他的子一級元素有效（ie6還不支援）。例子
p > span
相鄰選擇器
element + element
只對相鄰的元素，也就是下乙個元素的定義（ie6還不支援）。例子
p + p
id選擇符
#idname
element#idname
直接定義html的id名。例子
#csser
類選擇符
.classname
element.classname
這兩個有什麼不同呢，前乙個是定義所有class="classname"。例子
.rotui
屬性選擇符
element[attr]
element[attr=value]
element[attr~=value]
element[attr|=value]
element[attr] 選擇具有attr屬性的e1 例子
input[value]
element[attr=value]選擇具有attr屬性且屬性值等於value的元素 例子
input[type=password]
element[attr~=value]選擇具有attr屬性且屬性值為一用空格分隔的字詞列表，其中乙個等於value的element。這裡的value不能包含空格 例子
input[value~="aoao"]
element[attr|=value] 選擇具有attr屬性且屬性值為一用連字元（-）分隔的字詞列表，必須是以value開始的元素。 例子
input[value|="rotui"]
ps:以上的ie瀏覽器看不到.
選擇符分組
element1,element2
將同樣的定義應用於多個選擇符，可以將選擇符以逗號分隔的方式並為組。不只只是元素，上面所說的八類選擇符跟下面的都可以應用 。例子
th,td
偽類選擇符
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
:first-child 包含選擇符裡面的第乙個元素的定義。例子div p:first-child
:lang() 對已指明語言的元素進行定義。例子p:lang(en)
偽物件
element:first-letter
element:first-line
element:before
element:after
:first-letter 首字定義，很好理解，就是第乙個字。例子
.letter:first-letter
:first-line 首行定義，第一行會有效果，換行符（
）也可以分割第一行。例子 .letter:first-line
:before和:after 在元素之前（before）跟之後（after）配合 content屬性新增內容。例子
em:before
em:after
每個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 /* 只有乙個普通元素加成，結果是 0,0,0,1 */
body h1
/* 兩個普通元素加成，結果是 0,0,0,2 */
——後者勝出
h2.grape
/* 乙個普通元素、乙個class選擇符加成，結果是 0,0,1,1*/
h2 /*乙個普通元素，結果是 0,0,0,1 */
——前者勝出
html > body table tr[id=」totals」] td ul > li
/* 7個普通元素、乙個屬性選擇符、兩個其他選擇符，結果是0,0,1,7 */
li#answer
/* 乙個id選擇符，乙個普通選擇符，結果是0,1,0,1 */
——後者勝出
除了specificity還有一些其他規則
文內的樣式優先順序為1,0,0,0，所以始終高於外部定義。這裡文內樣式指形如blah
的樣式，而外部定義指經由或標籤定義的規則。
有!important宣告的規則高於一切。
如果!important宣告衝突，則比較優先權。
如果優先權一樣，則按照在原始碼中出現的順序決定，後來者居上。
由繼承而得到的樣式沒有specificity的計算，它低於一切其他規則(比如全域性選擇符*定義的規則)。
關於經由@import載入的外部樣式，由於@import必須出現在所有其他規則定義之前(如不是，則瀏覽器應該忽略之)，所以按照後來居上原則，一般優先權衝突時是佔下風的。
這裡需要提一下ie，ie是可以識別位置錯誤的@import的，但無論@import在什麼地方，它都認為是位於所有其他規則定義之前的，這可能會引發一些誤會。
看來一篇寫不完了，屬性留在下篇再說吧（這年頭多混個頁的流量也不容易） ！
樣式表CSS的高階語法
2007 09 17 選擇器的分組 你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。以下是引用片段 h1,h2,h3,h4,h5,h6 繼承及其問題 根據css，子元素從父元素繼...
三 css系列之語法 樣式表
一 css簡介及基本語法 1.什麼是css cascading style sheet層疊樣式表，用於修飾和美化html標籤的一種計算機語言，能夠實現結構表現的分離。2.css基本語法選擇器3.選擇器 選擇器也叫作選擇符，作用是告訴瀏覽器，樣式的應用物件 4.選擇器的種類 標籤選擇器 元素選擇器 類...
如何只在IE上載入CSS樣式表
前言 ie一直是特殊的乙個瀏覽器，我們可以使用一些方法來指定樣式表只在ie瀏覽器下被載入。ie9以及低於ie9版本 可以使用條件注釋語句來載入特定於ie的樣式表。如下所示，使用外部樣式表。但是如果是ie10以上時，這個辦法就不是很適用了。ie10或ie11 使用 查詢 ms high contras...