CSS-6-常见复合选择器

1.后代选择器(重点) 注意:项目一拿到手,不要考虑其他的,直接使用后代选择器
选择器名之间用空格隔开
后面的选择器名是前面的后代
最终效果作用在最后一个元素身上
中间的辈分可以省略:3-5个层级即可
例子:

	.father .son .sun {属性名:属性值;}

	<div class="father">
		父亲
		<div class="son">
			儿子
			<div class="sun">
				红色孙子
			</div>
		</div>
	</div>

2.子代选择器
选择器名之间用>隔开
后面的选择器名是前面的子代
最终效果作用在最后一个选择器名身上
子代选择器中间的辈分不能省略
例子:

	.father>.son>.sun {}

	<div class="father">
		父亲
		<div class="son">
			儿子
			<div class="sun">
				红色孙子
			</div>
		</div>
	</div>

3.交集选择器(重点)
选择器名之间没有任何链接符号
找到一个!!!元素,同时拥有所有的条件,才可以被控制—缺一不可,多多益善
例子:

	.father.son.sun {}
	
	<div class="father son sun">
		红色孙子
	</div>

4.并集选择器(重点)
选择器名之间用逗号隔开
每一个条件单独一行
只要满足我任意一个条件即可
例子:

	div,
	.demo,
	#flag,
	span {}

5.a链接伪类选择器(重点)
按如下顺序编写否则可能引发错误

		a:link      /* 未访问的链接 */
		a:visited   /* 已访问的链接 */
		
		a:hover     /* 鼠标移动到链接上 */----常用
		
		a:active    /* 选定的链接 */

实际工作开发中，我们很少写全四个状态，一般我们写法如下：

	a {   /* a是标签选择器  所有的链接 */
		font-weight: 700;
		font-size: 16px;
		color: gray;
	}
	a:hover {   /* 标签名:hover 是链接伪类选择器 鼠标经过 */
		color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
	}