问答详情
源自：8-6 捡了一个儿子 - 子选择器

8-9子选择器

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
        	<li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    	<ul>
        	<li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

为什么将.food>li 中的 li 改成其它名字之后会显示不出正确的红框？ 这个li 是 ul-li 中的 li 吗？

提问者：有事烧纸 2015-12-07 00:57

个回答

  • qq_安伊偌拉_0
    2015-12-07 09:20:31
    已采纳

    “为什么将.food>li 中的 li 改成其它名字之后会显示不出正确的红框？ ”，你说的其他名字是什么意思？

    0
  • 有事烧纸
    2015-12-07 11:06:17

    http://img.mukewang.com/5664f79500019e8909040597.jpg没改代码之前的红框

    0
  • 有事烧纸
    2015-12-07 11:04:36

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>x{border:1px solid red;}
</style>
</head>
<body>

<h1>食物</h1>
<ul class="food">
    <x>水果
        <ul>
        	<li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </x>
    <x>蔬菜
    	<ul>
        	<li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </x>
</ul>
</body>
</html>

    http://img.mukewang.com/5664f71d0001a22307890592.jpg 将li改成x之后 红框显示不一样

    0
  • echo_kinchao
    2015-12-07 09:58:41

    你的代码意思 只局限作用于第一代子元素

    0
  • mu_mu
    2015-12-07 09:16:07

     这个li 是 ul-li 中的 li , 其中的.food代表class=“food”的ul, .food>li的意思就是类名为food下的li子元素，而且“>”只限选择第一代子元素，所以在这>后边只能是li.除非你给 .food的子元素设置id,class ,那么li就可以换成是它的类名或者id值

    0
  • 一毛钱
    2015-12-07 09:00:40

    这个li是水果蔬菜的li

    element>element 选择器用于选取带有特定父元素的元素。

    只限于第一代

    0