分組選擇器

分組選擇器

假設(shè)希望 h2 元素和段落都有灰色。為達到這個目的，最容易的做法是使用以下聲明：

 

h2, p {color:gray;}

 

將 h2 和 p 選擇器放在規(guī)則左邊，然后用逗號分隔，就定義了一個規(guī)則。其右邊的樣式（color:gray;）將應(yīng)用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規(guī)則中包含兩個不同的選擇器。可以將任意多個選擇器分組在一起，對此沒有任何限制。例如，如果您想把很多元素顯示為灰色，可以使用類似如下的規(guī)則：

 

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

 

 5. CSS *選擇器

選擇所有元素，并設(shè)置它們的背景色：

 

*{ background-color:yellow;}

 

 

3.2.2  層次選擇器


層次選擇器，又稱后代選擇器，主要包括如表3-2所示幾種類型層次選擇器。"CSS" 列指示該屬性是在哪個 CSS 版本中定義的。（CSS1、CSS2還是 CSS3。）

表3-2  層次選擇器                       

 

選擇器

 		 

類  型

 		 

功能描述

 
 

E  F

 		 

后代選擇器

 		 

選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)。

 
 

E>F

 		 

子選擇器

 		 

選擇匹配的F元素，且匹配的F元素是所匹配的E元素的子元素。

 
 

E+F

 		 

相鄰兄弟選擇器

 		 

選擇匹配的F元素，且匹配的F元素緊跟位于匹配的E元素后面。

 
 

E~F

 		 

通用選擇器

 		 

選擇匹配的F元素，且位于匹配的E元素后的所有匹配F元素

 

備注: "CSS"列指示該屬性是在哪個 CSS 版本中定義的。（CSS1、CSS2 還是 CSS3。）

1.  CSS后代選擇器

后代選擇器可以選擇作為某元素后代的元素。我們可以定義后代選擇器來創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。舉例來說，如果您希望只對 h1 元素中的 em 元素應(yīng)用樣式，可以這樣寫：

 

h1 em {color:red;}

 

上面這個規(guī)則會把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色。其他 em 文本（如段落或塊引用中的 em）則不會被這個規(guī)則選中：

 

<h1>This is a  <em>important</em> heading</h1>

 

<p>This is a  <em>important</em> paragraph.</p>

 

2.  CSS子選擇器

與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。如果您不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。   例如，如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：

 

h1 > strong {color:red;}

 

這個規(guī)則會把第一個 h1 下面的兩個 strong 元素變?yōu)榧t色，但是第二個 h1 中的 strong 不受影響：

 

<h1>This is  <strong>very</strong> <strong>very</strong>  important.</h1>

 

<h1>This is <em>really  <strong>very</strong></em> important.</h1>

 

3.  CSS相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。例如，如果要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距，可以這樣寫：

 

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

 

這個選擇器讀作：“選擇緊接在 h1 元素后出現(xiàn)的段落，h1和 p 元素擁有共同的父元素”。

4.  CSS通用選擇器

為所有相同的父元素中位于 p 元素之后的所有 ul 元素設(shè)置背景：

 

p~ul{background:#ff0000;}

 

瀏覽器支持--所有主流瀏覽器都支持 element1~element2 選擇器。注釋：對于 IE8 中的該選擇器，必須聲明 <!DOCTYPE>。