js后代选择器_后代选择器和子元素选择器的区别

原文

简书原文：https://www.jianshu.com/p/4a776598c69c

大纲

1、后代选择器和子元素选择器的相关概念

2、后代选择器和子元素选择器的区别

1、后代选择器和子元素选择器的相关概念

1.1、后代选择器

后代选择器(descendant selector)又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

h1 em {color:red;}

1.2、子元素选择器

与后代选择器相比，子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器(Child selector)。

h1 > em {color:red;}

2、后代选择器和子元素选择器的区别

实例分析

CSS中nav ul li ul 与 nav>ul>li 这两种写法的区别是什么，>的作用是什么？

1、nav>ul只选择nav下一级里面的ul元素，例如上面dom结构里id为a的ul。

2、nav ul选择nav内所包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。

3、nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

*{

margin:0;

padding:0;

list-style:none;

}nav ul li ul{

display:none;

}nav>ul>li{

float:left;

padding:10px;

border:1px solid blue;

}nav>ul>li>ul>li{

padding:10px;

border-bottom:1px solid #ccc;

}