Selectors (選擇器) ---------------參考MDN中css學習。 首先css選擇器有很多，但總體概括起來的話有兩種： 標簽選擇器（*是特殊情況），可但標簽，也可上下文多標簽； 屬性選擇器（id和class都是屬性，特殊的屬性）； 標簽選擇器~單標簽 指此單個的標簽名字，使用時可
Selectors (選擇器)
---------------參考MDN中css學習。
首先css選擇器有很多，但總體概括起來的話有兩種：
- 標簽選擇器（*是特殊情況），可但標簽，也可上下文多標簽；
- 屬性選擇器（id和class都是屬性，特殊的屬性）；
標簽選擇器~單標簽
指此單個的標簽名字，使用時可直接用該標簽進行樣式操作，例如操作這段html中<strong>標簽里的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
在css文件中使用它的標簽就能對標簽里的屬性進行樣式操作，比如讓字母變成紅色。
strong {
color: red;
}
標簽選擇器~多標簽
官方版
| 選擇器 | 選擇的元素 |
A E |
任何是元素A的後代元素E (後代節點指A的子節點，子節點的子節點，以此類推) |
A > E |
任何元素A的子元素 |
E:first-child |
任何元素的第一個子元素E |
B + E |
任何元素B的下一個兄弟元素E |
B ~ E |
B元素後面的擁有共同父元素的兄弟元素E |
通俗解釋版
- 選擇一個祖先的所有子孫節點，例如 div p{…}
- 選擇一個父元素的所有直屬節點，例如 div > p{…}
- 選擇某一個元素緊挨著的兄弟節點，例如 li + li{…}
- 選擇某一個元素的所有同胞節點，例如 span ~ a{…}
- 以上各種情況的組合應用（不要組合過於複雜，編碼講求可讀性第一）
給大家列舉一個比較典型的應用，如下圖
上圖中的效果應該比較常見，在各個菜單之間加下劃線。我之前的實現是：每個li都加一個border-bottom，在把最後一個li的border-bottom去掉。
其實完全沒必要這樣麻煩，下麵一個樣式設置即可解決：
ul li+li{ border-top: 1px solid #ccc; }
慄子引用：http://www.cnblogs.com/wangfupeng1988/p/4282954.html
屬性選擇器~
最首先當然是要拿出兩位重量級選手了：class 和 id 
（Class selectors）
通過設置元素的 class 屬性，可以為元素指定類名。類名由開發者自己指定。 文檔中的多個元素可以擁有同一個類名。
在寫樣式表時，類選擇器是以英文句號（.）開頭的。
（ID selectors）
通過設置元素的 id 屬性為該元素制定ID。ID名由開發者指定。每個ID在文檔中必須是唯一的。
在寫樣式表時，ID選擇器是以#開頭的。
我們來看一個慄子：
<p class="key" id="principal">
.key { color: green; } #principal { font-weight: bolder; }
上面的p標簽同時具有 class 屬性和id 屬性，
css中id選擇器principal必須是唯一的，而class選擇器卻是可以和其他標簽中的key相同，從而達到多個標簽同時操作。
你也可以將多個選擇器組合起來構成更確定的選擇器。
比如，選擇器.key 選中所有class屬性為 key的元素. 選擇器 p.key 選中所有class屬性為key的<p> 元素。
除了class 和 id，你還可以用方括弧的形式指定其他屬性。比如，選擇器 [type='button'] 選中所有 type 屬性為 button 的元素
實例: 使用類選擇器和ID選擇器
- 創建一個HTML文件
- 創建style1.css
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p id="first"> <strong class="carrot">C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets </p> <p id="second"> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html>
strong { color: red; } .carrot { color: orange; } .spinach { color: green; } #first { font-style: italic; }
3.保存文件使用瀏覽器執行
重新組織樣式中規則的順序，你會發現改變這幾條規則的順序不會影響最終效果。
類選擇器 .carrot 和.spinach 比標簽選擇器 strong 擁有更高優先順序。
ID 選擇器 #first 比類選擇器和標簽選擇器更優先。
結尾：
第一篇先記錄這些吧，後面還有偽類和偽元素，個人還不是很懂，所以先學習學習在進行總結。
剛開始寫博客，還有很多的不足個人感覺節奏還是有點問題，希望各位海涵。我會慢慢優化，如有遺漏希望各位前輩指教，一定虛心學習 謝謝~
