// ul,li{}：设置所有ul和li元素的样式<style>ul,li{color:red}</style><ul><li>红色</li></ul><ol><li>红色</li></ol>
//ul li{}：只设置ul下的li元素 后代选择器，ul 里所有的 li 元素，包括 ol 里的 li ;<style>ul li{color:red}</style><ul><li>红色</li></ul><ol><li>浏览器默认颜色，黑色，而不是红色</li></ol>// ul>li{}：设置ul标签下的直接li元素，这个样式没多大意义，因为ul的合法子元素是li，应该用其他元素来举例好点，不过你硬要插入不合法元素也可以，如下面的 子代选择器，下一级的DOM节点，不包括 ol 里的 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>// 但是注意，这个样子那个黑色也会红 <style>.all-goods > li{color: red; }</style><ul class="all-goods"><li>红色</li><li><div>//这会变红是因为颜色继承了<li>黑色(会变红)</li></div></li></ul>
