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

.food>li改为.food>ul为什么没有将整个列表框起来？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>ul{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/

</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<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>

Y留过长发虽未及腰

2016-01-25

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

关注问题我要回答

874

操作

收起

8 回答

rerewong 回答被采纳 +3 积分
2016-01-25

.food>ul 是指.food下第一级的ul

<ul class="food"> 这里 .food指的就是ul

如果你想把整个列表框起来可以把 .food>ul{border:1px solid red;}改成.food{border:1px solid red;}

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

#1

Y留过长发虽未及腰提问者

非常感谢！

2016-01-28 回复有任何疑惑可以回复我~

真羊
2016-01-25

<ul>是用来定义无序列表的，只是一种声明，而<li>是定义列表项目时使用的，必须跟有实际内容，所以把实际内容框起来才有意义。即要定义.food>li

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

SnailTogo
2016-01-25

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
 
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<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>

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

二进制狙击手
2016-01-25

<li>是ul的子项只对子项起作用

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

xiaoxiao77
2016-01-25

只对直接子后代

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

lelelongxuan
2016-01-25

.food>li>ul 因为ul属于li的子元素标签你少些了它的父元素标签<li>

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

徐菲
2016-01-25

>只对子项起作用 <li>是ul的子项

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

MadMarical
2016-01-25

你好。子选择器并不包含后代的后代，子选择器只会包含第一个后代。如果要包含所有后代需要用空格代替<符号。

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

举报

0/150

提交

取消

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

参与学习 1226052 人
解答问题 18236 个

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

本课相似问答

4 回答为什么把.food>li{border:1px solid red;}中的li改为ul边框消失了

2 回答.food>li和ul>li为什么效果不一样

3 回答.food li能否换成#food li呢？

1 回答设置成.food ul li 是不是代表只对ul后面的li有效 ul不起作用

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

搜索更多本课相关问答

.food>li改为.food>ul为什么没有将整个列表框起来？

我要回答关注问题

意见反馈帮助中心 APP下载