CSS3中的ul,li{}; ul li{}; ul>li{}这三个有什么区别？

Question

转行学WEB前端，为什么上课听讲师讲都理解，可以到了下课自己回家再练习就蒙B了，好郁闷。

ul,li{
margin:0px;
padding:0px;
}
ul li{
margin:0px;
padding:0px;
}

为什么用ul,li才能取得图片的效果？小弟百度了可以没有具体答案。求前辈们可以告知？非常感谢！

Answer 1

ul,li{}：设置所有ul和li元素的样式

 <style>
    ul,li{color:red}
</style>
<ul><li>红色</li></ul>
<ol><li>红色</li></ol>

ul li{}：只设置ul下的li元素

 <style>
    ul li{color:red}
</style>
<ul><li>红色</li></ul>
<ol><li>浏览器默认颜色，黑色，而不是红色</li></ol>

ul>li{}：设置ul标签下的直接li元素，这个样式没多大意义，因为ul的合法子元素是li，应该用其他元素来举例好点，不过你硬要插入不合法元素也可以，如下面的

 <style>
    ul>li{color:red}
</style>
<ul>
    <li>红色</li>
    <div>
        <li>黑色</li>
    </div>
</ul>

直接子元素示例你可以看这个多明显

 <style>
    div>b{color:red}
</style>
<div>
    <b>红色</b>
    <span><b>黑色</b></span>
</div>