<style type="text/css">
/*.box後代一級的p（兒子）*/
.box>p{
color: red;
font-weight: 700;
}
</style>
<div class="box">
<h2>區域標題</h2>
<p>段落一</p>
<span>span</span>
<p>段落二</p>
<ul>
<li>
<p>我是li裏的P元素</p>
</li>
</ul>
<div class="one">區塊一</div>
<p>我是最後一個段落</p>
<p>段落一</p>
<span>dfdffd</span>
<p>段落二</p>
</div>
效果：
<style type="text/css">
/*.nav後代一級的ul,ul後代一級的li，li後代一級的ul*/
.nav>ul>li>ul{
color: blue;
}
</style>
<div class="nav">
<ul>
<li>兒子
<ul>
<li>重孫子</li>
</ul>
</li>
<li>兒子
<ul>
<li>重孫子</li>
</ul>
</li>
<li>兒子
<ul>
<li>重孫子</li>
</ul>
</li>
<li>兒子
<ul>
<li>重孫子</li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
/* h2緊挨着的下一個兄弟元素span */
h2+span{
border: 1px solid red;
}
</style>
<body>
<div class="box">
<h2>區域標題</h2>
<span>span</span>
<p>段落二</p>
<ul>
<li>
<p>我是li裏的P元素</p>
</li>
</ul>
<div class="one">區塊一</div>
<!--<span>span</span>-->
<p>我是最後一個段落</p>
<p>段落一</p>
<span>dfdffd</span>
<p>段落二</p>
</div>
/* h2後面所有的兄弟元素span */
h2~span {
border: 1px solid green;
}
