CSS:為什么子選擇器和后代選擇器的效果時而相同時而不同？

在多重信息列表中，樣式設(shè)置為改變文本顏色，字體大小等，子選擇器和后代選擇器效果一樣；而樣式設(shè)置為文本加上邊框，子選擇器和后代選擇器效果就不同了，這是為什么呢？

1.設(shè)置字體顏色，字體大小（兩個選擇器效果相同）

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>

運行結(jié)果

子選擇器改變的只是第一層<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>

運行結(jié)果

2.設(shè)置字體邊框

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>

運行結(jié)果

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>

運行結(jié)果