-1- 元素选择器（标签选择器）
语法：标签名{}
h1{
}
p{
}
-2- id选择器
选中对应id属性值的元素
语法：#id属性值{}
注意：id属性值是独一无二的存在
#p1{
}
-3- class选择器
选中对应class属性值的元素
语法：.class属性值{}
注意：id选择器和class选择器很像，只不过class属性值可以复用
.p1{
}-4- 通配选择器
选中页面中所有的元素
语法：*{}
-5- 复合选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
基本语法格式：元素1,元素2{样式声明}
注意：
元素1元素2之间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
例：
要求1：把熊大熊二改成蓝色
要求2：把熊大熊二改成蓝色且把小猪佩奇一家
同时改成蓝色
html代码如下（示例）：
<body>
<!--并集选择器-->
<div class="nav1">
熊大
</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
代码如下（示例）：
/*并集选择器,可以选择多组标签,同时为他们定义相同样式*/
/*要求1:把熊大熊二改成蓝色*/
/*.nav1,p {
color: blue;
}*/
/*要求2:把熊大熊二改成蓝色且把小猪一家改成蓝色*/
.nav,p,.pig li {
color: blue ;
}
交集选择器又称标签指定式选择器
作用：选择出同时符合两个标签的内容
格式：1.由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器；2.两个选择器之间不能有空格
例如：老师要求他的班级中所有学生把头发染成红色
div.student{
color: red;
}
-6- 关系选择器
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔）
- 相邻兄弟选择器（以加号 + 分隔）
- 普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
div p
{
background-color:yellow;
}
子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：
div>p
{
background-color:yellow;
}
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
div+p
{
background-color:yellow;
}
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
div~p
{
background-color:yellow;
}
-7- 属性选择器
具有特定属性的HTML元素样式不仅仅是class和id。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
[title]
{
color:blue;
}
[title=runoob]
{
border:5px solid green;
}
-8- 伪类选择器
-伪类用来描述一个元素的特殊状态
比如：第一个元素，被点击的元素，鼠标移入的元素···
-特点：一般请情况下，使用：开头
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
特殊值： n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数
—以上这些伪类都是根据所有的子元素进行排序
1、:first-of-type
2、:last-of-type
3、:nth-of-type()
功能跟上面相似，
—不同的是，这是在同类型的子元素中去选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*去掉项目符号*/
ul {
list-style: none;
}
/* 需求一：将ul里的第一个li自动一直设置为红色 */
/* ul>li:first-child{color:red} */
/* ul>li:last-child{color:blue} */
/* ul>li:not(:nth-child(3)){color: green;} */
/* ul>li:not(:nth-of-type(3)){color: green;} */
/* li:nth-child(1) {
color: pink;
} */
/* li:nth-of-type(1){
background-color: red;
} */
li:not(:first-of-type){
font-size: 50px;
}
</style>
</head>
<body>
<h1>沁园春·雪</h1>
<h3>毛泽东</h3>
<ul>
<span>测试</span>
<p>北国风光，千里冰封，万里雪飘。</p>
<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
<li>须晴日，看红装素裹，分外妖娆。</li>
<li>江山如此多娇，引无数英雄竞折腰。</li>
<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
</ul>
</body>
</html>
-9- 伪元素选择器
::first-letter表示第一个字母，例如：p::first-letter{}
<style>
p::first-letter{
font-size: 30px;
color: blueviolet;
}
</style>
::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}
<style>
p::first-line{
color: blue;
}
</style>
::selection表示选中的内容
<style>
p::selection{
color: aqua;
}
</style>
::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用
<style>
p::after{
content: "hahaha";
color: red;
}
p::before{
content: "hehehe";
color: coral;
}
</style>
