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

Westeros
  • 3
新手上路,请多包涵

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

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

回复
阅读 2.7k
3 个回答
Westeros
  • 3
新手上路,请多包涵
✓ 已被采纳

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

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

止醉
  • 771

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏