[讀書筆記] CSS權威指南1: 選擇器

通配選擇器

可以與任何元素匹配，就像是一個通配符

/*每一個元素的字體都設置為紅色*/
* {
    color: red;
}

元素選擇器

指示文檔元素的選擇器。

/*為body的字體設置為紅色*/
body {
    color: red；
}

分組

• 選擇器分組

h1, h2, h3 {
    color: red;
}

• 聲明分組

h1 {
    font: 18px Helvetica;
    color: purple;
    background: aqua;
}

• 結合選擇器和聲明分組

h1, h2, h3 {
    font: 18px Helvetica;
    color: purple;
    background: aqua;
}

類選擇器和ID選擇器

獨立於文檔元素的方式來指定樣式

• 類選擇器

.warning {
    font-weight: bold
}

/*包含warning元素的p標簽會apply下麵的style*/
p.warning {
    font-weight: bold
}

/*同時包含urgent和warning類名的元素會apply下麵的style，類名順序不限*/
.urgent.warning {
    font-weight: bold
}

/*同時包含urgent和warning類名的元素P會apply下麵的style*/
p.urgent.warning {
    font-weight: bold
}

• ID選擇器

#content {
    margin: 0;
}

ID選擇器和類選擇器的不同之處：

1. 在一個HTML文檔中，ID選擇器會使用一次，而且僅一次。因此，如果有一個元素的id值為lead-para,那麼該文檔中所有其他元素的id值都不能是lead-para。(註: 瀏覽器通常並不檢查HTML中ID的唯一性，這意味著如果你在HTML文檔中設罝了多個有相同ID屬性值的元素，就可能為這些元素應用相同的樣式。)
2. ID選擇器不能結合使用，因為ID屬性不允許有以空格分隔的詞列表。

類選擇器和ID選擇器可能是區分大小寫的，這取決於文檔語言。HTML和 XHTML將類和ID值定義為區分大小寫，所以類和ID值的大小寫必須與文檔中的相應值匹配。

屬性選擇器

• 簡單屬性選擇器

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

/*選擇有class屬性（值不限）的所有h1元素，設置其字體顏色為紅色 */
h1[class] {
    color: red;
}

/*將同時有href和title屬性的HTML超鏈接的文本置為粗體*/
a[href][title] {
    font-weight: bold;
}

•  根據具體屬性值選擇

/*設置具有href屬性，並且屬性值為http://www.w3.org/的a標簽的font-size為200%*/
a[href="http://www.w3.org/"] {
    font-size: 200%;
}

/*同時滿足*/
a[href="http://www.w3.org/"][title="W3C Home"]{
    font-size: 200%;
}

這種格式要求必須與屬性值完全匹配

• 根據部分屬性值選擇

如果屬性能接受詞列表（詞之間用空格分隔），可以根據其中的任意一個詞進行選擇。

<span class="barren rocky">Mercury</planet>
<span class="cloudy barren">Venus</planet>
<span class="life-bearing cloudy">Earth</planet>
/*為了把class屬性中有barren的所有元素變為斜體，可以寫作：*/
span[class~="barren"] {
    font-style: italic;
}

p.warning和p[class~="warning"]應用到HTML文檔時是等價的

• 特定屬性選擇類型

用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

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

/*上述標簽前三個會變成紅色，後兩個還是黑色*/
*[lang|="en"] {
  color: red;
}

後代選擇器

h1 em {
    color: gray;
}

/*blockquote中包含的所有b（粗體）元素的文本顏色為灰色，另外正常段落中的所有粗體文本也為灰色*/
blockquote b, p b {
    color: gray;
}

後代選擇器中，元素之間的層次間隔可以是無限的。

子元素選擇器

h1>strong {
    color: red;
}

子元素選擇器限製為只匹配樹種直接相連的元素。

可以在同一個選擇器中結合使用後代選擇器和子選擇器。

/*選擇作為一個td元素子元素的所有p元素，這個td元素本身從table元素繼承，該table元素有一個包含summary的class屬性*/
table.suitimary td > p {
    color: red;
}

相鄰兄弟選擇器

和子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。

/*去除緊接在一個h1元素後出現的段落的上邊距*/
h1+p {
    margin-top: 0;
}

需要註意的是：

• 用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。因此，如果寫作li+li {font-weight: bold;}，只會把各列表中的第二個及以後的列表項變成粗體。
• 兩個元素之間的文本內容不會影響相鄰兄弟結合符起作用。

<div>
<ol>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ol> This is some text that is part of the 'div'.
<ul>
<li>A list item</li>
<li>Another list item</li>
<li>Yet another list item</li>
</ul>
</div>
/*儘管兩個列表間多了一行文本，不過還是可以用選擇器ol+ul來匹配第二個列表。*/
ol+ul {
    color: red;
}

偽類和偽元素選擇器

利用偽類和偽元素選擇器，可以為文檔中不一定具有存在的結構指定樣式，或者為某些元素(甚至是文檔本身)的狀態所指示的幻像類指定樣式。會根據另外某種條件而非文檔結構向文檔中的某些部分應用樣式，而且無法通過研究文檔的標記準確地推斷出採用何種方式應用樣式。

• 偽類選擇器

a {
    color: red;
}

a:link {
    color: red;
}
/*兩者是不同的，
a:link指示的是一個有href屬性的，並且未訪問過的所有a節點
a會應用到所有a標簽
*/

a:link {
    color: blue;
}

a:visited {
    color: red;
}

a.external:link, a.external:visited {
    color: maroon;
}

偽類的順序很重要，通常建議為link-visited-focus-hover-active。

:link和:visited是靜態的——第一次顯示之後，它們一般不會在改變文檔的樣式。

:focus, :hover, :active是動態偽類。動態偽類可以應用到任何元素。

input:focus {
  background-color: silver;
  font-weight: bold;
}

• • 選擇第一個子元素——:first-child，這也是一個靜態偽類。

/*
作為某元素(可以是任意元素)的第一個子元素的所有P元素設置為粗體。
最常見的錯誤是認為p:first-child之類的選擇器會選擇p元素的第一個子元素。*/
p:first-child {
    font-weight: bold;
}

• •  根據語言選擇—— :lang()偽類。

從對應的模式來講，:lang()偽類就像是|=屬性選擇器。

*:lang(fr) { 
  font-style: italic;
}

偽選擇器和屬性選擇器之間的主要差別在於語言信息可以從很多來源得到，而且其中一些可能在元素之外。CSS2.1指出：

在HTML中，語言由lang屬性和META元素的組合來確定，還可能包括協議提供的信息，如HTTP首部。XML使用一個xml:lang屬性，另外可能還有其他文檔語言特定的方法來確定語言。

因此，偽類比屬性選擇器稍微健壯一些。

結合偽類：

/*滑鼠指針停留在未訪問鏈接上時，可以讓這些鏈接變成紅色，而滑鼠指針停留在已訪問鏈接上時，鏈接變成紫紅色。*/
a:link:hover {
    color: red;
}

a:visited:hover {
    color: maroon;
}

 用哪種順序指定並不重要，寫成a:hover:link會得到與a:link:hover一樣的效果。

• 偽元素選擇器

就像偽類為錨指定幻象類一樣，偽元素能夠在文檔中插入假想的元素，從而得到某種效果。CSS2.1中定義了4個偽元素：設置首字母樣式、設置第一行樣式、設置之前和之後的樣式。

• • 設置首字母樣式

用於設置一個塊級元素首字母的樣式，而且僅對該首字母設置樣式。

/*讓每個h2中第一個字母的大小是標題中其餘字母大小的2倍*/
h2:first-letter {
    font-size: 200%;
}

這個規則會導致用戶代理(瀏覽器)對一個假想的元素作出響應，這個假想元素包含每個h2中的第一個字母。可能如下所示：
<h2><h2:first-letter>T</h2:first-letter>his is an h2 element</h2>
:first-letter樣式只應用到上例所示假想元素的內容。這個<h2:first:-letter>元素並不出現在文檔源代碼中。相反，它是由用戶代理動態構造的，用於向相應文本塊應用：first-letter樣式。換句話說，<h2:first-letter>是一個偽元素。

• • 設置第一行樣式

:first-line可以用來影響元素中第一個文本行。(第一行是指顯示區域的第一行，所以瀏覽器視窗大小不同，第一行所代表的字元數量也是不同的。)

/*應用於每一段所顯示的第一行文本。*/
p:first-line {
    color: red;
}

:first-letter, :first-line允許設置的CSS屬性：

• • 設置之前和之後的樣式

h2:before {
  content: "before";
  color: red;
}

h2:after {
  content: "after";
  color: red;
}

所有偽元素都必須放在出現該偽元素的選擇器的最後面，如果寫成p: first-line em就是不合法的，因為偽元素在選擇器主體前面出現。