您现在的位置:首页 >> 前端 >> 内容

包含选择器和子选择器的区别对比

时间:2017/10/17 10:38:00 点击:

  核心提示:子选择器:即大于符号(),用于选择指定标签元素的第一代子元素。 语法:.foodli{border:1px solid red;}包含选择器:即加入空格,用于选择指定标签元素下的后辈元素 语法:.fi...

子选择器:即大于符号(>),用于选择指定标签元素的第一代子元素。 语法:.food>li{border:1px solid red;}

包含选择器:即加入空格,用于选择指定标签元素下的后辈元素 语法:.first span{color:red;}

请注意:这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代(只能作用于第一代后代,对其他后代不起作用)。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。(对所有后代都起作用)

作者:网络 来源:Mr_faded的博