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

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

ul,li{
margin:0px;
padding:0px;
}
ul li{
margin:0px;
padding:0px;
}
图片说明

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

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>

----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力

ul,li{}; ul li{}; ul>li{}
这是三个选择器,ul,li{}是分组选择器,只有在多种选择器需要设置同一个样式时,才会使用这个。
ul li{}是包含(后代)选择器,用于将指定的ul下面的所有li设置同一样式。
ul>li{}是子代选择器,用于将指定标签下面的第一代子元素设置同一样式.。
具体情况下选择具体的选择器会达到事半功倍的效果。


其实我也不太懂你想问什么,不过以下我说的,希望对你学习有些许帮助:
当你使用ul 或者ol时,要明白html标签当中有些标签默认自带的一些显性的属性是我们在实际使用中基本不用的,
所以需要写规则将其重定义,列表默认有填充与边界,li默认还带序号或点,一般我是这样写一次搞定它们:


ul,ol,li{margin: 0; padding: 0;list-style: none;}