CSS 分組 和 巢狀 選擇器
選擇器分組
假設(shè)希望 h2 元素和段落都有灰色。要達到這個目的，最容易的做法是使用以下宣告：
h2, p {color:gray;}
將h2 和p 選擇器放在規(guī)則左邊，再用逗號分隔，就定義了一個規(guī)則。其右邊的樣式（color:gray;）將會套用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規(guī)則中包含兩個不同的選擇器。如果沒有這個逗號，那麼規(guī)則的意思將會完全不同。請參閱後代選擇器。
可以將任意多個選擇器分組在一起，對此沒有任何限制。
例如，如果您想把很多元素顯示為灰色，可以使用類似如下的規(guī)則：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示：透過分組，創(chuàng)作者可以將某些類型的樣式「壓縮」在一起，這樣就可以得到更簡潔的樣式表。
以下的兩組規(guī)則能得到相同的結(jié)果，不過可以很清楚地看出哪一個寫起來比較容易：
/* no grouping */?
h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;}?
#?/* grouping */?
h1, h2, h3, h4, h5, h6 {color:blue;}
實例：
############################################################# #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<style type="text/css">
h1, h2, h3, h4, h5, p{
color:purple;
font-size:15px;
}
h2.special, .special, #one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>集體聲明h1</h1>
<h2 class="special">集體聲明h2</h2>
<h3>集體聲明h3</h3>
<h4>集體聲明h4</h4>
<h5>集體聲明h5</h5>
<p>集體聲明p1</p>
<p class="special">集體聲明p2</p>
<p id="one">集體聲明p3</p>
</body>
</html>#########巢狀選擇器###################使用規(guī)則小結(jié)：#########1、id嵌套class #myid.myclass： <p id="sp" class="myclass"></p>。
2、一個元素標籤使用多個class。 .important.warning <p class="important warning">注意不要有空格 。有空格表示分別適用於兩個class。
3、id標籤內(nèi)的class元素。 #myid .myclass? <div id="myid"><p class="myclass"></p></div>
4、元素標籤下的class。 p .myclass <p><span class="myclass"></span></p>
4、元素標籤下的id。 p #myid<p><span id="myid"></span></p>
5、class下的元素標籤。 .myclass span? <p class="myclass"><span>dd</span></p>
6、id標籤內(nèi)的id標籤#myid2 <div id="myid" ><div id="myid2"></div></div>。 id的用法和元素標籤類似。
7、.myclass1 .myclass2是表示兩個class使用同一個樣式，而不是巢狀。 class也能嵌套class。但若兩個.myclass之間沒有空格表示同時擁有這兩個class
8、元素標籤嵌套元素標籤p span <p><span></span></p>
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<style type="text/css">
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
</body>
</html>
