付初学者晨
2016-09-06 10:26
.food ul{border:1px solid red;} 是有效果的,
但是.food>ul{ border:1px solid red} 为什么没有效果呢?
我理解这两种表达的效果应该是一样的。
少了一个分号,加上去就好了
.food li{border:1px solid red;} 后面再加个分号,一条语句是以分号结束的
">"为选择指定标签元素的第一代子元素。
.food>ul指的是类选择器为food的第一代子元素为ul的元素,我们可以看到类选择器为food的第一代子元素只有li元素,ul元素为它的后代元素非第一代子元素。所以(.food ul)存在,而(.food>ul)不存在
最后一句写错了,应该是再输入“”.food li{ border:1px solid red}“” 对比一下看看
回复 慕粉3719687:其实也是不完整的,下面的表格的代码是这样的
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
当你输入.food ul{ border:1px solid red}的时候,“水果”和“蔬菜”这两项便没有被包括在内,你可以再试着输入.food>li{ border:1px solid red} 对比一下看看
第十四行代码中<ul class="food">,说明food对应的是ul的标签,在使用子选择器时应该选择它的子选项li才对,即.food>li{ border:1px solid red}, 跟一楼的冒号没关系
两者的样式包含关系不一致,前者是food里面所有的ul都会加上边框,后者是只有food包含的第一个ul才会加上边框,就是说它只识别到food里面最靠近food的一对<ul></ul>标识,其它的识别不了。这个是我理解的两者的区别。
应该是.food>li{ border:1px solid red}
我试了一下还是不行诶
solid red少了冒号兄弟。是solid:red
初识HTML(5)+CSS(3)-升级版
1225293 学习 · 18230 问题
相似问题