.food>ul{ border:1px solid red} 为什么没有效果呢

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

付初学者晨

2016-09-06 10:26

.food ul{border:1px solid red;} 是有效果的,

但是.food>ul{ border:1px solid red} 为什么没有效果呢?

我理解这两种表达的效果应该是一样的。


写回答 关注

10回答

  • 天凡云
    2016-09-26 19:16:30

    少了一个分号,加上去就好了

  • weibo_我是广明_0
    2016-09-25 19:11:05

    .food li{border:1px solid red;} 后面再加个分号,一条语句是以分号结束的

  • mtgaoyang
    2016-09-10 23:26:43

    ">"为选择指定标签元素的第一代子元素。

    .food>ul指的是类选择器为food的第一代子元素为ul的元素,我们可以看到类选择器为food的第一代子元素只有li元素,ul元素为它的后代元素非第一代子元素。所以(.food ul)存在,而(.food>ul)不存在

  • 慕村5970917
    2016-09-06 11:54:46

    最后一句写错了,应该是再输入“”.food li{ border:1px solid red}“” 对比一下看看

  • 慕村5970917
    2016-09-06 11:51:27

    回复 慕粉3719687:其实也是不完整的,下面的表格的代码是这样的

    <ul class="food">

        <li>水果

            <ul>

            <li>香蕉</li>

                <li>苹果</li>

                <li>梨</li>

            </ul>

        </li>

        <li>蔬菜

        <ul>

            <li>白菜</li>

                <li>油菜</li>

                <li>卷心菜</li>

            </ul>

        </li>

    </ul>

    当你输入.food ul{ border:1px solid red}的时候,“水果”和“蔬菜”这两项便没有被包括在内,你可以再试着输入.food>li{ border:1px solid red} 对比一下看看


  • 慕村5970917
    2016-09-06 10:39:39

    第十四行代码中<ul class="food">,说明food对应的是ul的标签,在使用子选择器时应该选择它的子选项li才对,即.food>li{ border:1px solid red}, 跟一楼的冒号没关系

    付初学者晨

    但是.food ul{ border:1px solid red}这个可以诶

    2016-09-06 10:46:32

    共 1 条回复 >

  • juymy
    2016-09-06 10:36:56

    两者的样式包含关系不一致,前者是food里面所有的ul都会加上边框,后者是只有food包含的第一个ul才会加上边框,就是说它只识别到food里面最靠近food的一对<ul></ul>标识,其它的识别不了。这个是我理解的两者的区别。

    付初学者晨

    但是后者<ul></ul>识别不出来诶

    2016-09-06 10:48:29

    共 1 条回复 >

  • 慕村5970917
    2016-09-06 10:36:25

    应该是.food>li{ border:1px solid red} 

  • 付初学者晨
    2016-09-06 10:34:58

    我试了一下还是不行诶

  • 天黑说晚安
    2016-09-06 10:32:13

    solid red少了冒号兄弟。是solid:red

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

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

1225293 学习 · 18230 问题

查看课程

相似问题