SOURCE

<h1>Heading</h1>
<fotter class="mark">
  <section id="s1">
    此段落仅受s1标签控制。
    <p>此段落受s1和p标签控制。</p>
  </section>
  <h3>子元素选择器：</h3>
  <p>此段落背景色为红，字体为绿。mark标签下p标签中方可显示此效果。</p>
</fotter>
<div>
  <h3>后代选择器：</h3>
  <p>本实例选取所有p元素插入到 div元素中: </p>
</div>
<p>此段落不受div控制。</p>
<span>
  <h3>相邻兄弟选择器:</h3>
  <p>本实例选取了所有位于span元素后的第一个p元素:</p>
</span>
<p>此段落受span控制。</p>
<a>
  <h3>普通相邻兄弟选择器:</h3>
  <p>实例选取了所有div元素的所有相邻兄弟元素p:</p>
</a>
<p>此段落受a控制。</p>
<p>此段落也受a控制。</p>

h1, p,.p1,#id1{
  color: green;
}

.mark>p {
  background-color: red;
}

#s1{
  font-size: 28px;
}

div p{
  text-align: center;
}
span+p{
  color:  blue;
}
a~p{
  background-color: yellow;
}