                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

源自：初识HTML(5)+CSS(3)-升级版 8-6

关注问题我要回答

674

操作

收起

6 回答

qq_安伊偌拉_0 回答被采纳 +3 积分
2015-12-07

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

0 回复有任何疑惑可以回复我~

收起回答

有事烧纸提问者

比如改成如下 <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>

2015-12-07 回复有任何疑惑可以回复我~

qq_安伊偌拉_0 回复有事烧纸提问者

x不管是li还是div，效果都一样

2015-12-07 回复有任何疑惑可以回复我~

有事烧纸提问者

谢谢！（ li 改成div是可行的

2015-12-08 回复有任何疑惑可以回复我~

有事烧纸提问者
2015-12-07

没改代码之前的红框

0 回复有任何疑惑可以回复我~

收起回答

有事烧纸提问者
2015-12-07

<!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>

将li改成x之后红框显示不一样

0 回复有任何疑惑可以回复我~

收起回答

qq_安伊偌拉_0

x是个什么东西，你自创的标签啊

2015-12-07 回复有任何疑惑可以回复我~

有事烧纸提问者回复 qq_安伊偌拉_0

是。。我就想试试

2015-12-08 回复有任何疑惑可以回复我~

qq_安伊偌拉_0 回复有事烧纸提问者

不能这么玩

2015-12-08 回复有任何疑惑可以回复我~

echo_kinchao
2015-12-07

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

0 回复有任何疑惑可以回复我~

收起回答

mu_mu
2015-12-07

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

0 回复有任何疑惑可以回复我~

收起回答