问答详情
源自:8-7 这么快就当爷爷了? - 后代选择器

我还是理解不了这个第一代选择器

.food>li{

border:1px solid red;

}

是水果和蔬菜两个li加了边框,那为什么我在里面加上一条color:blue的话,ul li里面的香蕉白菜等字体颜色都会变成蓝色?

提问者:慕仙6215699 2018-09-06 11:47

个回答

  • 吱吱叫的老鼠
    2018-09-06 15:04:08
    已采纳

    .food>li{

    border:1px solid red;

    }  --这个就是选择第一代子元素,但是因为第一代子元素里面还有第二代或者第三代元素,由于继承的原因,他们会继承第一代元素的样式,但是我们可以自己给第二代子元素添加样式,比如

    .food > li{
        border: 1px solid red;
        background: blue;
    }
    .food li ul li{
        background: green;
    }

    ---你会发现22222222的背景是绿色的,11111111是蓝色的

        <ul class="food">
            <li>
                <ul>
                    <li>222222222</li>
                </ul>
            </li>
            <li>
                111111111
            </li>
        </ul>
        9999999999999999999999999


  • hurui123
    2018-09-13 21:02:20

    我看了一下课程的文字一样 来找答案 我看看回答能不能让我明白把 哈哈

  • Corbie_L
    2018-09-06 13:52:36

    你把下一课敲一下就明白了   你加上了颜色是给水果和蔬菜前面的li加上的 这两个li包含了后面的东西 所以字体都变蓝了

  • Corbie_L
    2018-09-06 13:44:25

    food>li 表示的是作为food下的所以li子元素