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>

運行結果

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

運行結果

回答

編輯回答

獨白

關于子選擇器和后代選擇器的區(qū)別，@止醉大神已經說的很形象很清楚

【此疑問解答】子元素會繼承部分父元素的屬性，color可以繼承，而border不能繼承，這區(qū)別也就造成了1.1的運行結果，子選擇器的樣式確實直接作用與第一層的<li>,而此樣式的屬性為color，所以能被第二層的<li>元素繼承；至于2.1和2.2的運行結果不同是因為：border屬性不能被子元素繼承！【表達可能不規(guī)范，大概意思如此】

2018年3月18日 06:50

編輯回答

遺莣

子代選擇器只對一級子元素起作用

<ul class="posteritySelector">
    <li>中國作家 <!--子代選擇器只對這層有影響-->
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外國作家
        <ul>
            <li>馬克吐溫</li>
            <li>托爾斯泰</li>
        </ul>
    </li>
</ul>

而后代選擇器對ul中的所有l(wèi)i都起作用
圖片描述

2018年3月12日 14:24

編輯回答