css复合选择器

交集选择器

交集选择器由两个选择器构成，第一个为标签选择器，第二个为class选择器，两个选择器之间不可由空格

div.singer {
		font-weight: 700;
	}

	    <div class="singer">卡卡西</div>
	<div class="singer">鸣人</div>
	<p class="singer">露西</p>
	<p class="singer">路飞</p>

即是singer又是div满足条件的

并集选择器

并集选择器是各个选择器通过 逗号 连接而成的，任何形式的选择器（包括标签选择器、class选择器id选择器），都可以作为并集选择器的一部分，如果某些选择器定义 的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式
可以理解并集选择器为 和 的意思，只要逗号隔开的，所有选择器都会执行后面样式

p,div,h1,.red {
		color: red;
	}

<p>苹果</p>
<div>白菜</div>
<h1>大米</h1>
<em class="red">变色</em>
<em>不同上</em>

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素相的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生 嵌套 时，内层标签就成为外层标签的后代
例：

`.nav ul li {
		color: blue;
	}

<div class="nav">
		<ul>
			<li>123</li>
			<li>456</li>
			<li>789</li>
		</ul>
	</div>
	<div>
		<ul>
			<li>qwe</li>
			<li>rty</li>
			<li>uio</li>
		</ul>
	</div>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素
写法 父级标签写在前面，子级标签写在后面，中间加一个 > 进行连接
注意：符号左右两侧各保留一个空格

	.item li {          /*后代选择器*/
		color: red

	}
	.item > li {       /*子元素选择器*/ 
		color: blue;
	}

 	<ul class="item">
		<li>一级菜单
			<ul>
				<li>123</li>
				<li>123</li>
			</ul>
		</li>
		<li>一级菜单
			<ul>
				<li>456</li>
				<li>456</li>
			</ul>
		</li>
		<li>一级菜单
			<ul>
				<li>456</li>
				<li>456</li>
			</ul>
		</li>
	</ul>