• 3
  • 新人请关照

CSS:为什么子选择器和后代选择器的效果时而相同时而不同?

在多重信息列表中,样式设置为改变文本颜色,字体大小等,子选择器和后代选择器效果一样;而样式设置为文本加上边框,子选择器和后代选择器效果就不同了,这是为什么呢?

1.设置字体颜色,字体大小(两个选择器效果相同)

1.1子选择器

.sonSelector>li{
        color: red;
        font-size: 18px;
    }
----------
<ul class="sonSelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png
子选择器改变的只是第一层<li>的样式,也就是“中国作家”,“外国作家”这两条字体大小,颜色改变,这没有问题,问题在于里层的<li>列表为什么也变了???

1.2后代选择器(两个选择器效果不同)

.posteritySelector li{
        color: red;
        font-size: 18px;
    }
----------
<ul class="posteritySelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

2.设置字体边框

2.1子选择器

.sonSelector>li{
    border: 1px solid orange;
    }
----------
<ul class="sonSelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

2.2后代选择器

.posteritySelector li{
        border: 1px solid orange;
    }
----------
<ul class="posteritySelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

阅读 1.2k
评论
    3 个回答
    • 3
    • 新人请关照

    关于子选择器和后代选择器的区别,@止醉大神已经说的很形象很清楚

    【此疑问解答】子元素会继承部分父元素的属性,color可以继承,而border不能继承,这区别也就造成了1.1的运行结果,子选择器的样式确实直接作用与第一层的<li>,而此样式的属性为color,所以能被第二层的<li>元素继承;至于2.1和2.2的运行结果不同是因为:border属性不能被子元素继承!【表达可能不规范,大概意思如此】

      • 759

      子代选择器 只对一级子元素起作用

      <ul class="posteritySelector">
          <li>中国作家 <!--子代选择器只对这层有影响-->
              <ol>
                  <li>朱自清</li>
                  <li>莫言</li>
              </ol>
          </li>
          <li>外国作家
              <ul>
                  <li>马克吐温</li>
                  <li>托尔斯泰</li>
              </ul>
          </li>
      </ul>

      而后代选择器对ul中的所有li都起作用
      图片描述

        • 96

        楼上正解!子代为儿子这一代,后代则包括儿子.孙子.曾孙。。

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章