后代子元素选择器交集并集选择器 4大复合选择器的区别

①后代选择器（重点）

　　【空格隔开】

　　概念：后代选择器又叫包含选择器

　　为什么要用复合选择器？因为基础选择器不够强大，不能快速高效准确精细的完全页面style设置。复合选择器是两个或多个基础选择器组合而成的。

　　作用：用来选择元素或者元素的子孙后代

　　写法：把外层标签写在前面，内存标签写在后面，中间用空格分隔，先写爷爷父亲，再写儿子孙子。

　　语法：父级 子级 {属性：属性值；属性：属性值}

　　注：当标签发生嵌套时，内层标签就成了外层标签的后代标签

　　

 

/*后代选择器*/
/* 常山 赵子龙 */
.nav a {
	color:red;
}
.wang ul li {
	color:red;
}

　　②并集选择器（重点）

　　【逗号隔开】

　　如果某些选择器定义的样式是相同的样式，就可以利用并集选择器。可以让代码更简洁。并集选择器（css选择器分组）是各个选择器通过连接而成的。通常用于集体申明。

　　任何基础选择器都能组合成并集选择器。

　　记忆技巧：用于集体申明，各个选择器用“，”分隔。“，”可以理解成“和”的意思。

 

/*并集选择器*/
p,div,.my {
	color:red;
}

　　③子元素选择器

　　【 > 隔开】

　　作用：只能选择某元素（亲儿子）的元素。

　　写法：父亲标签写在前面 + > + 儿子标签 {}

　　注意：子元素必须是亲儿子，不包含孙子重孙子之类的。

 

/*子元素选择器*/
div>strong {
	color:red;
}

　　④交集选择器

　　【.号连接】

　　条件：交集选择器由两个选择器组成。找到的标签必须满足：既有第一个标签的特点，又有第二个标签的特点。

　　记忆技巧：交集是并且的意思，即是。。。又是。。。的意思。但通常用的不多，也不建议使用。

 

/*交集选择器*/
<p class="red">红色</p>
p.red {
	color:red;
}

http://moban.shenhuangji.com/post/27.html