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>
尝试一下
