CSS選擇器筆記

元素選擇器。文檔的元素就是最基本的選擇器。如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，也可以是 html 本身。

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

類型選擇器（type selector）。即元素選擇器。新標準叫這個，可以設置XML文檔中元素的樣式。

選擇器分組。通過分組，創作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。

body, h2, p, table, th, td, pre, strong, em {color:gray;}

通配選擇器（universal selector）。顯示爲一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。這個聲明等價於列出了文檔中所有元素的一個分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個星號）就能使文檔中所有元素的 color 屬性值指定爲 red。

* {color:red;}

聲明分組。對聲明分組，一定要在各個聲明的最後使用分號，這很重要。因爲瀏覽器會忽略樣式表中的空白符。

h1 {font: 28px Verdana; color: white; background: black;}

結合選擇器分組和聲明分組。

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

類選擇器。類選擇器允許以一種獨立於文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。

*.important {color:red;}

即類名前有一個點號（.），然後結合通配選擇器

.important {color:red;}

只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器。

p.important {color:red;}

類選擇器結合元素選擇器。只有段落顯示爲紅色文本。選擇器現在會匹配 class 屬性包含 important 的所有 p 元素，但是其他任何類型的元素都不匹配，不論是否有此 class 屬性。

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<pre><p <span class="marked">class="important warning"</span>>
This paragraph is a very important warning.
</p>

多類選擇器。兩個詞的順序無關緊要，寫成 warning important 也可以。class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景就可以寫成上面的樣子。不僅是隻單單用單background屬性，這三個不同的屬性都會用到。如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。

ID 選擇器。ID 選擇器類似於類選擇器，不過也有一些重要差別。首先，ID 選擇器前面有一個 # 號。

*#intro {font-weight:bold;}

結合通配選擇器

#intro {font-weight:bold;}

忽略通配選擇器

區別與聯繫：與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次（id是爲一個元素分配名字，名字唯一，所以在一個文檔中不能重複出現）。ID 選擇器不能結合使用，因爲 ID 屬性不允許有以空格分隔的詞列表（一個元素一個名字，就是沒有多id選擇器）。類選擇器和 ID 選擇器可能是區分大小寫的。這取決於文檔的語言。HTML 和 XHTML 將類和 ID 值定義爲區分大小寫，所以類和 ID 值的大小寫必須與文檔中的相應值匹配。

屬性選擇器。如果希望選擇有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器。

*[title] {color:red;}

屬性選擇器結合通配選擇器。

a[href] {color:red;}

屬性選擇器結合元素選擇器。

a[href][title] {color:red;}

多屬性選擇器

p[class="important warning"] {color: red;}

類也算是一個屬性，這是屬性選擇器的應用，不算類選擇器。這是在定義的過程中。在使用的過程中，與類選擇器並沒有什麼區別。

<p class="important warning">This paragraph is a very important warning.</p>

這裏如果寫成p[class="important"]那麼這個規則是不能夠匹配的，所以這個不能叫多屬性選擇器。

p[class~="important"] {color: red;}

部分屬性選擇器，如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。這樣的話如果class="important warning"的話，也是可以被成功匹配的。如果不帶有波浪號，這裏就不能夠被匹配成功的。但是如果是下面的多類選擇器的話，是能夠匹配的上的，這是多類選擇器與部分屬性選擇器的差別。

p.important
{
color: red;
}
<p class="important warning">This is a paragraph.</a>

用部分屬性選擇器的好處是，假如定義了一個Figure的屬性值，然後使用的時候可以有 Figure 1，Figure 2等屬性值，這樣在寫代碼的時候清晰。

子串匹配屬性選擇器。這個是屬性選擇器的高級版本，有三種模式。[abc^="def"]表示abc屬性值是以"def"開頭的所有元素。[abc$="def"]表示abc屬性值以"def"結尾的所有元素。[abc*="def"]表示abc屬性值中包含子串"def"的所有元素。

*[lang|="en"] {color: red;}

特定屬性選擇器，上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。最常見的用途還是匹配語言值。假設一個 HTML 文檔中有一系列圖片，其中每個圖片的文件名都形如  figure-1.jpg 和 figure-2.jpg，那麼用這個屬性就最好了。這樣在寫代碼的時候會清晰易維護。如下面所示。

img[src|="/i/figure"] {border: 1px solid gray;}
<img title="Figure 1" src="/i/figure-1.gif" />
<img title="Figure 2" src="/i/figure-2.gif" />

後代選擇器（descendant selector），又稱爲包含選擇器。作用是可以選擇作爲某元素後代的元素。如果只希望對h1元素中的em元素應用樣式，可以這樣寫：

h1 em {color:red;}

表示h1元素中的子元素<em>的樣式會變成紅色字體。此時<p>元素中的子元素<em>的樣式不會改變。當然也有別的辦法，比如在h1中找到的每一個em元素上放一個class屬性，但是後代選擇器效率更高些。這裏，選擇器之間的空格是一種結合符 combinator。作用就是包含關係，左邊的爲父，右邊爲子。這裏兩個元素之間的層次間隔是無限的，不一定是直接的父子關係。上面代碼中，不論em元素嵌套層次有多深，選擇器都能夠正確匹配。

子元素選擇器（Child Selector）。與後代選擇器相比，它只能選擇作爲某元素子元素的元素。

h1 > strong {color:red;}

這裏大於號兩邊加上空白符也不會改變成爲後代選擇器的。大於號叫做子結合符。

table.company td > p

後代選擇器與子選擇器結合，從右往左讀，td>p，表示td的直接子元素<p>會匹配該規則。然後是table.company td表示這個 td 元素本身從 table 元素繼承，該 table 元素有一個包含 company 的 class 屬性。

相鄰兄弟選擇器Adjacent sibling selector。可選擇緊接着在另一個元素後的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}

這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。如果此時再出現第二個<p>元素，就不會在匹配了。這個加號叫做相鄰兄弟結合符，與子選擇器一樣，相鄰兄弟結合符旁邊可以有空白符。

li + li {font-weight:bold;}

如果列表中一個列表裏有好多<li>標籤，那麼選擇器只會把第二個以後的列表項變爲粗體。第一項不受影響。

html > body table + ul {margin-top:20px;}

這個是相鄰兄弟選擇器，子元素選擇器和後代選擇器相結合的。選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。（從右往左讀）