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

Question

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

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>

运行结果

子选择器改变的只是第一层<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>

运行结果

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>

运行结果

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>

运行结果

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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