子元素选择器_CSS

后代选择器，作用于所有的后代元素

而子元素选择器，只作用于子元素

结构：父元素选择器＋>＋子元素选择器
如下，可以看到，只有class＝“paihang”的子元素P颜色变红了，而ul li中的p元素颜色仍然是黑色

<style>
  .paihang >p{
      color: red;
  }
</style>
 
<div class="paihang">
    <p>排行榜</p>
    <ul>
        <li>
            <p>阿里</p>
        </li>
        <li>
            <p>腾讯</p>
        </li>
        <li>
            <p>百度</p>
        </li>
    </ul>
</div>

尝试一下》

结合后代选择器和子元素选择器，如下，.paihang ul li >p 指class＝“paihang”的后代ul的后代li中的子元素p

<style>
  .paihang ul li>p{
      color: red;
  }
</style>
 
<div class="paihang">
    <p>排行榜</p>
    <ul>
        <li>
            <p>阿里</p>
        </li>
        <li>
            <p>腾讯</p>
        </li>
        <li>
            <p>百度</p>
        </li>
    </ul>
</div>

尝试一下》