选择器：每一条css样式声明（定义）由两部分组成，形式如下：选择器{样式；}
一、标签选择器：就是html中的标签
div{
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div>
css样式
</div>
</body>
</html>二、类选择器：英文圆点开头，类选择器名称可以任意起名，不能是中文
步骤：
①使用合适的标签把要修饰的内容标记起来
②使用class="类选择器的名称"为标签设置一个类
③设置类选择器css样式 点（.）名字{}
.test{
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div class="test">
css样式
</div>
</body>
</html>三、ID选择器：为标签设置id="ID名称"，ID选择符的前面是#号
①ID选择器只能在文档中使用一次，类选择器能多次使用
②ID选择器只能为一个元素设置一个样式，类选择器能为一个元素设置多个样式
#test{
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div id="test">
css样式
</div>
</body>
</html>四、子选择器：用于选择指定标签元素的第一代子元素，使用 >
例：div>span{color：red;}
这里指的是在div标签下的第一级元素为span设置，而如果是div标签元素下的第二级span就不会被设置。
div>span{
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div>
<span>第一个子元素1</span>
<a>第二个子元素</a>
<span>第一个子元素2</span>
本元素
</div>
<div>
<span>第一个子元素1</span>
<a><span>第二个子元素</span></a>
本元素
</div>
</body>
</html>
五、包含（后代）选择器：将“>”符号改为空格，用于作用于选择器指定标签元素下的后辈元素。
意思是在指定标签元素下的所有指定子元素都会被设置。
div span{color:red;}
div span{
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div>
<span>第一级span元素1</span>
<a>a元素</a>
<span>第一级span元素2</span>
本元素
</div>
<div>
<span>第一级span元素</span>
<a><span>第二级span元素</span></a>
本元素
</div>
</body>
</html>
六、相邻兄弟选择器：作用于指定元素标签后面指定的那个相邻的元素标签
语法：h1 + li{color:red;}这里的意思是指在h1后面那个li元素
这种选择器作用在指定元素后面接着的那个指定元素，必须是相邻的，如果中间隔了一个，也是没法作用的。
span + a{
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div>
<span>
我是span元素
</span>
<a>我是a元素1</a>
<a>我是a元素2</a>
</div>
<div>
<span>我是span元素1</span>
<i>我是i元素1</i>
<a>我是a元素1</a>
<span>
<a>我是span元素里的a元素1</a>
<span>我是span元素里的span元素</span>
<a>我是span元素里的a元素2</a>
</span>
</div>
</body>
</html>
七、通用选择器：使用一个“*”号指定，匹配html中所有标签元素。
*{
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div>
<span>
我是span元素
</span>
<a>我是a元素1</a>
<a>我是a元素2</a>
</div>
</body>
</html>
八、伪类选择器：它允许给html中不存在的标签（值标签的某种状态）设置样式
E:link{color:red}指未点击时的状态(特指a标签)
E:visited{color:blue}指点击过后的状态（特指a标签）
E:hover{color:black}指点击时的状态（不限于a标签）
E:active{color:white}指选定的时候的状态，即点击了还没松开（不限于a标签）
由于代码展示的截图看不出来效果，这里提供代码，自己可以敲出来试验。还有好几种伪类，这里写出常用的。
a:link{
color: red;
}
a:visited{
color: black;
}
a:hover{
color: purple;
}
a:active{
color: blue;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
</head>
<body>
<div>
<a href="#">我是a1标签</a>
<a href="#">我是a2标签</a>
<a href="#">我是a3标签</a>
<a href="#">我是a4标签</a>
</div>
</body>
</html>
