css中父子的不同选择器

Question

有什么区别：

li ul {color:red;}

和

li > ul {color:yellow;}

我尝试两种方法并获得相同的结果。

Answer 1

第一个选择器覆盖li里面的所有ul。

第二个只覆盖李里面的直接ul后裔。

有关更多选择器提示，see this links

Answer 2

第一个选择器称为Descendant combinator，而第二个选择器称为Child combinators

后裔组合

li ul {color:red;}

  

有时，作者可能希望选择器描述一个元素   文档树中另一个元素的后代（例如，“EM   包含在H1元素中的元素“）。后代   组合者表达了这种关系。后代组合是   分隔两个简单选择器序列的空格。一个   形式“A B”的选择器表示作为的元素B.   一些祖先元素A的任意后代。

儿童组合器

li > ul {color:yellow;}

  

儿童组合者描述了两者之间的童年关系   元素。儿童组合器由“大于号”组成   （U + 003E，＆gt;）字符并分隔两个简单选择器序列。