不是应该是第一个是只显示水果和蔬菜是红色,第二个是全部都是红色吗,为什么运行是两个输出都是红色的

来源:8-7 这么快就当爷爷了? - 后代选择器

小zky

2018-08-05 23:16

<style type="text/css">

.food>li{

    color:red;

}

</style>

<ul class="food">

    <li>水果

        <ul>

        <li>香蕉</li>

         <li>苹果</li>

          <li>梨</li>

        </ul>

    </li>


    <li>蔬菜

        <ul>

        <li>白菜</li>

         <li>油菜</li>

          <li>卷心菜</li>

        </ul>

    </li>

</ul>

和下面这个为什么运行时一样的结果的

<style type="text/css">

.food  li{

    color:red;

}

</style>

<ul class="food">

    <li>水果

        <ul>

        <li>香蕉</li>

         <li>苹果</li>

          <li>梨</li>

        </ul>

    </li>


    <li>蔬菜

        <ul>

        <li>白菜</li>

         <li>油菜</li>

          <li>卷心菜</li>

        </ul>

    </li>

</ul>


写回答 关注

3回答

  • 3出发4
    2018-08-27 13:09:32

    "以color-  font-  text-  line-  开头的,这些关于文字样式的,都能够继承;所有关于盒子的,定位的,布局的属性都不能继承。"

    另外,具体可继承的属性为:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、text-indent、text-align、list-style、list-style-type、list-style-position、list-style-image。
    具体不可继承的属性为:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before等; 

    继承性是从大贯穿到最小的,从自己开始的,直到最小的元素。即继承性不光儿子可以继承,只要是后代都可以继承

  • 宝慕林842399
    2018-08-19 12:51:58

    你发的两段代码区别在哪?

  • 白衬衫阳光少年
    2018-08-06 00:59:09

    元素具有继承性

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225812 学习 · 18234 问题

查看课程

相似问题