基础选择器

选择器类型	描述	示例
通配选择器	通配选择器使用一个星号``表示，``会匹配所有元素	`* {` `color: red;` `}`
标签选择器	通过标签名匹配，匹配文档中所有为此标签名的元素	`p {` `color: red;` `}`
id选择器	通过井号`#`来定义id选择器，根据元素的`id`属性匹配（精确匹配）元素	`#box {` `width: 300px;` `}`
类选择器	通过点`.`来定义类选择器，根据元素的`class`属性匹配（精确匹配）元素	`.container {` `height: 100px;` `}`
组合选择器	包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器	`#box>.nav p {` `color: blue;` `}`

1、通配选择器

/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/
.box * { color: #000; }

* {
	margin: 0;
	padding: 0;
	border: 0;
}

2、标签选择器

3、id选择器

4、类选择器

5、组合选择器

选择器	间隔符	描述
后代选择器	空格	选取该元素的后代元素
子代选择器	`>` 大于号	选择该元素的第一级子元素
相邻选择器	`+` 加号	选择该元素之后相邻第一个元素，且两者具有相同的父元素
兄弟选择器	`~` 波浪号	选择该元素之后的同层级元素

综合样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 
		 选择器名：{
			 属性：属性值
		 }
		 */
		/* 通配选择器 */
		* {
			color:red;
		}
		/* 元素选择器 */
		a{
			text-decoration: none;
		}
		/* 类选择器 */
		.p1{
			color: blue;
		}
		/* id选择器 */
		#box{
			border: 1px solid green;
		}
		/* 子代选择器：div下第一代a */
		#box>a{
			color: pink;
		}
		/* 兄弟选择器：当前下一个+,所有~ */
		#target~li{
			color: #008000;
		}
		</style>
	</head>
	
	<body>
		<div id="box">
			<a href="#">Nick的笔记</a>
		<ul>
			<a href="#">Nick的笔记</a>
			<li id="target">Nick爱跑步</li>
			<li>Nick爱学习</li>
			<li>Nick爱编程</li>
			<li>Nick考C1</li>
		</ul>
			<p class="p1">
				┭┮﹏┭┮ 不能摆烂
			</p>
		</div>
	</body>
</html>