css 選擇器

css選擇有十種方式：元素選擇器、類選擇器、ID選擇器、選擇器分組、屬性選擇器、子元素選擇器、後代選擇器、相鄰兄弟元素選擇器、僞元素、僞類。

1. 元素選擇器。文檔的元素就是最基本的選擇器。如：html {color:black;}、note{font-family:Verdana, Arial;}(xml)。
2. 選擇器分組。結合選擇器和聲明的分組：h1, h2, h3, h4, h5, h6 {color:gray;background: white;padding: 10px; border: 1px solid black;font-family: Verdana;}；通配符選擇器：* {color:red;}
3. 類選擇器。容許以一種獨立於文檔元素的方式來指定樣式。如：修改html代碼:<h1 class="important">;　語法：.important {color:red;}；結合元素選擇器：h1.important {color:blue;};　css多類選擇器：.important.warning {background:silver;}，經過把兩個類選擇器連接在一塊兒，僅能夠選擇同時包含這些類名的元素（類名的順序不限）。
4. ID選擇器。容許以一種獨立於文檔元素的方式來指定樣式。如：<p id="intro"> #intro {font-weight:bold;}。只能在文檔中出現一次，不能使用ID詞列表，ID能包含更多含義。
5. 屬性選擇器。能夠根據元素的屬性及屬性值來選擇元素。

   　　           簡單屬性選擇：選擇有某個屬性的元素，而不論屬性值是什麼。如：*[title] {color:red;} ; a[href] {color:red;} ;a[href][title] {color:red;}(同時有 href 和 title 屬性);

   　　　　　　根據具體屬性值選擇：能夠進一步縮小選擇範圍，只選擇有特定屬性值的元素。如：a[href="http://www.baidu.com"] {color: red;};

   a[href="http://www.baidu.com"][title="W3School"] {color: red;}（同時具有）

   　　　　　　屬性與屬性值必須徹底匹配：這種格式要求必須與屬性值徹底匹配。若是屬性值包含用空格分隔的值列表，匹配就可能出問題。p[class="important warning"] {color: red;}

   　　　　　　根據部分屬性值選擇：若是須要根據屬性值中的詞列表的某個詞進行選擇，則須要使用波浪號（~）。如：p[class~="important"] {color: red;}。（部分值屬性選擇器與點號類名記法的區別在於，能夠使用一個基於 title 文檔的部分屬性選擇器，只選擇這些圖片，img[title~="Figure"] {border: 1px solid gray;}）

   　　　　　　　　<img title="Figure 1" src="/i/figure-1.gif" />
   　　　　　　　　　 <img title="Figure 2" src="/i/figure-2.gif" />

   　　　　　　子串匹配屬性選擇器：

   類型	描述
   [abc^="def"]	選擇 abc 屬性值以 "def" 開頭的全部元素
   [abc$="def"]	選擇 abc 屬性值以 "def" 結尾的全部元素
   [abc*="def"]	選擇 abc 屬性值中包含子串 "def" 的全部元素

   　　　　　特定屬性選擇類型：會選擇 lang 屬性等於 en 或以 en- 開頭的全部元素。如：*[lang|="en"] {color: red;};

   　　　　　　　　　　<p lang="en">Hello!</p> 　　　　　　　　　　<p lang="en-us">Greetings!</p> 　　　　　　　　　　<p lang="en-au">G'day!</p> 　　　　　　　　　　<p lang="fr">Bonjour!</p> 　　　　　　　　　　<p lang="cy-en">Jrooana!</p>

   　　　　　總結：

   選擇器	描述
   [attribute]	用於選取帶有指定屬性的元素。
   [attribute=value]	用於選取帶有指定屬性和值的元素。
   [attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
   [attribute|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
   [attribute^=value]	匹配屬性值以指定值開頭的每一個元素。
   [attribute$=value]	匹配屬性值以指定值結尾的每一個元素。
   [attribute*=value]	匹配屬性值中包含指定值的每一個元素。

6. 後代選擇器（包含選擇器）。能夠選擇做爲某元素後代的元素。如：h1 em {color:red;}，div.sidebar a:link {color:white;}。... 在 ... 找到。
7. 子元素選擇器。與後代選擇器相比，子元素選擇器（Child selectors）只能選擇做爲某元素子元素的元素。如：h1 > strong {color:red;}，table.company td > p（結合後代選擇器和子選擇器）。
8. 相鄰兄弟元素選擇器。選擇緊接在另外一元素後的元素，且兩者有相同父元素。h1 + p {margin-top:50px;}；html > body table + ul {margin-top:20px;}
9. 僞元素。用於向某些選擇器添加特殊的效果。僞元素的語法：selector:pseudo-element {property:value;}。只能用於塊級元素。

   屬性	描述	CSS
   :first-letter	向文本的第一個字母添加特殊樣式。	1
   :first-line	向文本的首行添加特殊樣式。	1
   :before	在元素以前添加內容。	2
   :after	在元素以後添加內容。	2

10. 僞類。用於向某些選擇器添加特殊的效果。

    屬性	描述	CSS
    :active	向被激活的元素添加樣式。	1
    :focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
    :hover	當鼠標懸浮在元素上方時，向元素添加樣式。	1
    :link	向未被訪問的連接添加樣式。	1
    :visited	向已被訪問的連接添加樣式。	1
    :first-child	向元素的第一個子元素添加樣式。	2
    :lang	向帶有指定 lang 屬性的元素添加樣式。	2

 　　　　

p > em:first-child{ font-weight:bold}<p>文字<q >段落中的引用的文字</q>文字</p>　　　　如：1.匹配屬於 <p> 元素中的第一個子元素的 <em> 元素：；2.q:lang(no){ quotes: "~" "~" }　　lang="no"