本节重点
1.什么是选择器
每一条css样式声明由两部分组成，如下：
选择器{
样式;
}
在css中{}之前的部分就是"选择器","选择器"指明了{}中的”样式“的作用对象，也就是说该”样式“作用与网页中的哪些元素。
2.基础选择器
标签选择器
标签选择器顾名思义就是html代码中的标签。我们之前学习的html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性。
它可以选中页面中所有的元素，而不是某一个元素内容，所以选中的是页面中共有的属性
举个栗子：
为页面中所有的段落设置字号为12px,字体颜色为红色，字体粗细为更粗。
代码如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type='text/css'>
p{
color:red;
font-size:12px;
font-weight:bold;
}
</style>
</head>
<body>
<h3>抖音</h3>
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了小猪佩奇。他们的标志是"手带小猪佩奇手表，身披小猪佩奇纹身"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
<img src="index01.jpeg" alt="">
<p>估计林俊杰本人都没想过，《醉赤壁》一句最不起眼的台词竟然成了众多网友口中的一个梗，最优秀这个梗的完美结合。</p>
<img src="index02.jpeg" alt="">
</body>
</html>
ID选择器
ID好比是每个人的身份证号一样，每个人都有身份证，并且身份证号是不一样的。在网页中所有的标签都可以设置id，并且id不能重复。
语法：
#ID选择器名称{
css样式代码;
}
注意：
1、以#开头
2、其中ID选择器名称可以任意起名(最好不要起中文)
3、ID的名称必须是唯一的
ID选择器选中的是页面中元素特有的属性。
比如对上节课代码中的林俊杰文本来设置字体颜色为绿色，并且字体大小为14px。并且设置《醉赤壁》文本的字体大小也为14px。那么仅仅靠标签选择器是完成不了的，我们可以这样做。
使用步骤如下：
1、使用合适(<span></span>)的标签把要修饰的内容标记出来，如下：
<span>林俊杰</span>
<span>《醉赤壁》</span>
2、使用id='id选择器名称'为每个标签设置不同的id。如下
<p>估计<span id="span1">林俊杰</span>本人都没想过，<span id="span2">《醉赤壁》</span>一句最不起眼的台词竟然成了众多网友口中的一个梗，最优秀的要属毛爷爷的表情包和这个梗的完美结合。</p>
有的童鞋可能有疑问了？难道我不能给林俊杰,《醉赤壁》添加完span标签之后，直接设置你要求的样式么？大家会发现，给文本全部设置为14px,并且设置了绿色，那么《醉赤壁》也会变为绿色，这是不能满足需求的。所以我们可以给每个span设置不同的id，来分别设置不同的样式
3、设置ID选择器css样式，如下：
#span1{
color:green;
font-size:14px;
}
#span2{
font-size:14px;
}
类选择器
类选择器跟id有点相似，任何的标签元素都可以添加类(class)，但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，用空格隔开。
比如狗、猫、刺猬属于动物类，黑白打印机和彩色打印机属于打印机类。同样情况下，比如网页中的某几个标签，像p、li、a标签同属于active类，那么我们就可以这边表示<p class='active'></p>，语法如下。
.类选择器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选择器名称可以任意起名(最好不要起中文)
既然类可以重复添加，并且同一个标签可以添加多个类，那么我们在使用类选择器的使用一定要有公共类的概念。
举个例子：
比如有三个同样的文本内容
<p>小马哥</p>
<p>小马哥</p>
<p>小马哥</p>
现在有个需求，要求第一个小马哥文本颜色是绿色并且字体大小是20px,第二个小马哥的文本颜色也是绿并且文本粗细更粗，第三个小马哥文本颜色是默认黑色且文本粗细更粗并且字体大小也为20px。
如果用我们的id选择器来书写的话，我们看一下代码。代码如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{
color:green;
font-size:20px;
}
#p2{
color:green;
font-weight:bold;
}
#p3{
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<p id='p1'>小马哥</p>
<p id='p2'>小马哥</p>
<p id='p3'>小马哥</p>
</body>
</html>
如果我们有公共类的概念，我们会通过需求发现，p1和p2有公共属性字体颜色为绿色，p1和p3有公共属性字体大小为20px，p2和p3有公共属性字体粗细为更粗。那么我们可以给每个p标签设置相应的类，代码如下：
<p class="lv big">小马哥</p>
<p class="lv bold">小马哥</p>
<p class="big bold">小马哥</p>
其中lv代表绿色，big代表字体大小20px,bold代表字体更粗
css代码
<style>
.lv{
color:green;
}
.big{
font-size:20px
}
.bold{
font-weight:bold;
}
</style>
那么，会发现明显更有效的使用类，能有效的减少一些冗余性的代码。
3.类和ID选择器的区别
上两小节学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是否两者可以通用使用呢？那么，我们先来总结他们的相同点和不同点：
相同点：可以应用于任何元素
不同点：
- ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅仅一次。而类选择器可以使用多次。
正确的编写：
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span class='pq'>小猪佩奇</span>。他们的标志是"<span class='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
错误的编写：
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span id='pq'>小猪佩奇</span>。他们的标志是"<span id='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
- 可以使用类选择器为一个元素同时设置多个样式。我们可以为一个元素同时设置多个样式，但值可以用类选择器的方法实现，ID选择器是不可以添加多个ID名字的。
正确的代码：
.pq{
color:red;
}
.bigSize{
font-size:20px
}
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span class='pq bigSize'>小猪佩奇</span>。他们的标志是"<span class='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
错误的代码：
#pq{
color:red;
}
#bigSize{
font-size:20px
}
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span id='pq bigSize'>小猪佩奇</span>。他们的标志是"<span class='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
4.高级选择器
后代选择器
顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。
语法：
div p{
css代码样式;
}
使用空格表示后代选择器，上面表示 div是父元素，而p是div的后代元素。
之前咱们讲解div标签的时候，说到div是一个容器，它可以装任何内容，这样我们能联想到我们的html结构应该是这样的。
<div>
<p>MJJ</p>
</div>
刚刚咱们又学习完了基本的选择器，我们也可以给div命名，比如<div class="container"></div>，那么css的编写如下代码：
.container p{
color:red;
}
子代选择器
子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。
语法：
div>p{css代码样式;}
好了，讲到这里我们来对比一下后代选择器和子代选择器分别在网页中的作用。
举个栗子：
有一个三级菜单，分别对二级菜单的列表的内容文本设置为绿色。
-
想到二级菜单，我们瞬间会想到使用我们的列表标签，那么开始搭建我们的html结构
<div class="menu"> <ul class="food"> <li> 水果 <ul> <li>香蕉 <ul> <li>仙人蕉</li> <li>西贡蕉</li> <li>畦头大蕉</li> </ul> </li> <li>苹果 <ul> <li>红蛇果</li> <li>烟台苹果</li> </ul> </li> </ul> </li> <li> 蔬菜 <ul> <li>白菜 <ul> <li>北京青白</li> <li>山东胶州大白菜</li> <li>东北大矮白菜</li> </ul> </li> <li>黄瓜 <ul> <li>春花瓜</li> <li>架黄瓜</li> <li>北京刺瓜</li> </ul> </li> </ul> </li> </ul> </div> -
如果使用后代选择器，或许有的同学可以这样写，为了省事，直接
ul li{color:green;}那么，我们会发现所有的列表都变成了绿色，不满足需求，因为ul的后代元素li,既选中了一级菜单的列表，又选中了二级菜单的列表,也选中了三级菜单。 -
如果我们使用子代选择器，我们可以这里编写css代码，css代码如下
.food>li>ul>li{ color:red; }会发现，三级菜单也变成了绿色，这个是由于css的属性继承性导致的，后面咱们会讲解。
通用选择器
通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素。使用它，我们可以对网页进行重置样式，以按照产品需求来开发对应的网页。
对页面中所有的文本设置为红色。
*{color:red;}
组合选择器
当你想在html中为多个标签元素设置同一个样式时，我们可能会想到添加相同的类，但是如果网页中的这样的标签非常多呢？是不是添加相同的类名，又成了我们累加的工作。不易于效率开发。那么我们可以使用组合选择器来选择，语法如下：
比如对网页中的h1，span,p标签的字体设置为color:gray;font-size:14px;
h1,span,p{
color:red;
font-size:14px;
}
对比一下：
标签选择器
h1{
color:red;
font-size:14px;
}
span{
color:red;
font-size:14px;
}
p{
color:red;
font-size:14px;
}
类选择器
<h1 class='active'>小马哥</h1>
<span class='active'>小马哥</span>
<p class='active'>小马哥</p>
.active{
color:red;
font-size:14px;
}
伪类选择器
更有趣的是伪类选择器，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色。
a:hover{
color:red;
}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器的使用</title>
<style type="text/css">
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
效果展示：
另外a标签不仅仅是应用在hover，鼠标悬浮上，它遵循”爱恨准则“，所谓爱恨就是”LoVe HAte“
那么分别是，代码如下：
/*没有被访问过a标签的样式*/
a:link {
color: green;
}
/*访问过后a标签的样式*/
a:visited {
color: yellow;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
color: blue;
}
注意：在页面中使用a的时候，一定按照顺序Link->visited->hover>active。
对于hover来说，不仅仅可以应用在a上，也可以应用在其他标签，比如div,p,li等等
