Css之子选择器和同胞选择器

一，子选择器

<ul id="nav">

<li>A</li>

<li>

<ul>

<li>AA</li>

<li>BB</li>

<li>CC</li>

</ul>

</li>

<li>C</li>

</ul>

样式：

#nav > li{color:red;}

这样的话只是Nav的直接孩子们设成红色。即A和C是红色的。而AA，BB和CC不受影响。

而样式如果是：

#nav  li{color:red;}

这样则会让Nav的所有孩子，包括孩子的孩子都设成红色。即A，C，AA，BB，CC 都是红色了。

 

二，同胞选择器

<div id="content">

<h1>标题</h1>

<p>第一个段落</p>

<p>第一个段落</p>

</div>

样式：

#content h1 + p{color:red;}

这样做只会让Content里的H1后面第一个段落变成红色。而第二个段落不受影响。

而样式如果是：

#content h1 p{color:red;}

这样则是让Content里的H1里面的P设为红色。本例中H1里面并没有P。所以此样式不会影响任何一个P。