CSS 组合选择器

组合选择器

标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。 

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

我们使用的时候一般用在重复出现并且样式相同的一些标签里，比如 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>

尝试一下