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

关于子选择器和后代选择器疑问

还是有点凌乱的,大家试一下这几种选择方式呈现的效果:

  1.   . food ul

  2.   .food li

  3.   .food ul li(这种方式哪位同学能和我解释一下意义么)

  4.    还有就是.food>ul 为什么没有效果呢?有.food ul>li 这种选择方式么


提问者:lanvy 2016-09-01 14:26

个回答

  • 慕工程6778917
    2016-09-01 15:26:47

    这是对类别下的选择器,给父级一个类(class)在给子级进行选择

     . food ul 这是找到ul

      .food li 这是找到li

      .food ul li 这是找的ul下的li

    .food>ul这是可以找的ul但不可以找到li(.food>li)不行

    .food ul>li 可以找到li



  • hellosmile
    2016-09-01 15:06:38

    1. 在类选择器food所在标签下的所有ul标签都会作用,比如.food li{border:1px solid red;}就会将每一个列表都加上红色边框,像下图这样,你可以在子选择器的例子中将子选择器改为后代选择器

      http://img.mukewang.com/57c7ced70001cb5f03490256.jpg

    2. 同上

    3. 类选择器food下的ul下的li  , 比如.food ul li{border:1px solid red;},效果如下图

      http://img.mukewang.com/57c7d03a0001829303520250.jpg

    4. >子选择器表示的是第一代子元素,

      http://img.mukewang.com/57c7d0a4000174b803330270.jpg

      上面的第一代子元素是“水果”和“蔬菜”所在的li标签,以“香蕉”、“苹果”、“梨”为一组的ul和以“白菜”、“油菜”、“卷心菜”为一组的ul为第二代子元素,第一代子元素中不包含ul标签所以不显示效果。

    5. .food ul>li  这种写法的意思是类选择器food下的所有ul标签下的第一个子元素,比如.food ul>li{border:1px solid red;}

      http://img.mukewang.com/57c7d30f00018e7403070241.jpg   http://img.mukewang.com/57c7d33b0001074f03410206.jpg

      上图中food下的所有ul标签下的第一个子元素为li,ul为第二代子元素,所以有显示边框效果

  • 你澍爷
    2016-09-01 15:02:23

    3,这个的意思就是ul下每一层li里都应用到.food

    4,.food>ul是有效果的,不过你要把代码写到他的上一层里去定义,在这个例子里就是{body class="food"}...{/body};有

  • 风一样的男纸3155700
    2016-09-01 14:57:27

    子选择器作用的是第一代子元素,后代选择器作用于所有后辈元素。

  • weibo_Mr路南_0
    2016-09-01 14:48:10

    子选择器作用的是第一代子元素,后代选择器作用于所有后辈元素。

    一二都比较简单,第三个的意思是作用于ul标签下的li标签,所以”水果“的那个li标签就没有任何效果。

    第四个问题,.food>ul之所以没有效果,是因为.food类下面第一代子元素就没有ul这个标签,当然没有效果了,不信可以把那个“水果”的那个li标签删掉,再看效果。.food ul>li是可以的,不言自明

  • 慕粉鱼儿
    2016-09-01 14:41:12

    .food ul li这种是找到.food下面的ul,ul下面的所有li