組合選擇器

標(biāo)簽選擇器、類選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標(biāo)簽選擇器和類選擇器組合，標(biāo)簽選擇器和ID選擇器組合。由于這兩種組合方式的原理和效果一樣，所以只介紹標(biāo)簽選擇器和類選擇器的組合。組合選擇器只是一種組合形式，并不算是一種真正的選擇器，但在實際中經(jīng)常使用。 

比如 .orderlist li {xxxx} 或者 .tableset td {} 

我們使用的時候一般用在重復(fù)出現(xiàn)并且樣式相同的一些標(biāo)簽里，比如 li td dd等。 

比如 <h1 class="red"></h1> H1.red {color: red} 

組合選擇器列表

1. A,B        多個元素選擇，同時匹配所有A元素和B元素，A和B之間用逗號分隔     div,p { color:red; }

2. A B       后代元素選擇器，匹配所有屬于A元素后代的B元素，A和B之間用空格分隔      #nav li { display:inline;    li a { font-weight:bold; }

3. A > B    子元素選擇器，匹配所有A元素的子元素B         div > strong { color:#f00; }

4. A + B     相鄰元素選擇器，匹配所有緊隨A元素之后的同級元素B        p + p { color:#f00; }

5. A ~ B     普通相鄰元素選擇器 ，匹配所有指定元素的相鄰元素。    div ~ p { color:#f00; }

多元素選擇器

//css 代碼：

<style>

div.mydivred,p.mypred

{padding:10px;background-color:#ffffff;border:1px #000000 solid;color:red;}

</style>

//html 代碼

<div class="mydivred"> div.mydivred</div>

<p class="mypred"> p.mypred</p>

嘗試一下

后代元素選擇器

<style>

#fuji .ziji

{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;color:red;

}

</style> 

<div id="fuji">

<div class="ziji"> div.ziji</div>

</div>

嘗試一下

子元素選擇器

<style>

#zys>span 

{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;color:red;

}

</style>

<div id="zys">

<span class="any"> div.ziji</span>

</div>

嘗試一下

相鄰元素選擇器

<style>

div+p

{

background-color:yellow;

}

</style>

<div>

<h2>My name is Donald</h2>

<p>I live in Duckburg.</p>

</div>

嘗試一下

普通相鄰元素選擇器

div~p

{

background-color: green;

}

<div>

<p>段落 1。 在 div 中。</p>

<p>段落 2。 在 div 中。</p>

</div>

<p>段落 3。不在 div 中。</p>

<p>段落 4。不在 div 中。</p>

嘗試一下