8-9子选择器
来源：8-6 捡了一个儿子 - 子选择器
有事烧纸
2015-12-07 00:57
<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 吗？
写回答
关注
6回答
-
- qq_安伊偌拉_0
- 2015-12-07 09:20:31
“为什么将.food>li 中的 li 改成其它名字之后会显示不出正确的红框？ ”，你说的其他名字是什么意思？
-
- 有事烧纸
- 2015-12-07 11:06:17
没改代码之前的红框 -
- 有事烧纸
- 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>
将li改成x之后 红框显示不一样 -
- echo_kinchao
- 2015-12-07 09:58:41
你的代码意思 只局限作用于第一代子元素
-
- 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值
-
- 一毛钱
- 2015-12-07 09:00:40
这个li是水果蔬菜的li
element>element 选择器用于选取带有特定父元素的元素。
只限于第一代
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1223055 学习 · 18212 问题
相似问题