选择器的作用就是将CSS样式和对应的需要修饰的标签关联起来，同时也增强了CSS代码的复用性，提高了代码效率。
首先来介绍基本的几个选择器
一、简单选择器
1、id选择器
<div id="only1"></div>id选择器是在标签中增加一个id属性，并且为这个属性添加一个唯一的值。每个标签只能有一个id选择器。
之后，在CSS文件中定义这个id选择器：
#only1{
width:100px;
height:100px;
border-radius:50%;
background-color:black;
}CSS中，定义ID选择器的格式为：#+[id名称]{}
在括号中定义需要的CSS样式。
2、class选择器
<div class="demo">hahaha</div>
<div class="demo demo1">对应多class值</div>class选择器是在标签内定义一个class属性，并且为这个属性添加一个唯一的值。每个标签可以由多个class选择器。
比如class选择器demo负责定义背景颜色，class选择器demo1负责定义字体颜色，那么将两个结合之后就可以为这个<div>标签附上背景颜色和字体颜色的CSS样式了。可以通过多个class选择器的组合，为标签定义不同的CSS样式，这样提高了代码的灵活性和复用性，提高了编码效率和减少了重复代码数量。
.demo{
background-color: yellow;
}
.demo1{
color: red;
/*color是改动字体颜色*/
}class选择器在CSS文件中的定义如上代码所示，格式为： .classname{}
下面举个例子展示一下class标签的灵活性。
<!--例子-->
<!--HTML代码-->
<div id="demo1">123</div>
<div id="demo2">234</div>
<div id="demo3">456</div>
<!--对应的CSS代码-->
#demo1{
width:100px;
height:100px;
margin:8px;
padding: 8px;
color: #f40;
}
#demo2{
width:100px;
height:100px;
margin:8px;
padding: 8px;
color: #0f0;
}
#demo3{
width:100px;
height:100px;
margin:8px;
padding: 8px;
color: #00f;
}
可以看见，我们定义了三个div 标签，这三个标签的CSS样式中，唯一不同的就是字体颜色，其他样式都是一样的。但是 如果采用id选择器，我们每一个选择器中都要写很多重复出现的代码，大大增加了代码冗余。
如果采用class选择器：
<!--HTML代码-->
<div class="box1 color1">123</div>
<div class="box2 color2">234</div>
<div class="box1 color3">456</div>
<!--CSS代码-->
.box1{
width:100px;
height:100px;
margin:8px;
padding: 8px;
}
.box2{
width:200px;
height:200px;
margin:8px;
padding: 8px;
}
.color1{
color: #f40;
}
.color2{
color: #0f0;
}
.color3{
color:#00f
}我们将复用度较高的代码单独拿出来设置成class选择器。然后在需要使用的时候，在标签中将多个选择器组合起来就可以实现丰富的CSS样式，而不用每写一个标签就要重新定义一个选择器。在代码量少了很多的前提下，能搭配出更多的CSS样式组合，极大的方便了程序的编写。（上面的代码中定义了五个class选择器，可以通过组合实现六种CSS样式，极大的精简了代码）
因此，在做一个项目之前，可以先考虑好哪些样式的代码复用度会比较高，先在CSS中为这些样式单独定义class选择器，在需要用的时候，就可以直接在HTML中组合class选择器了。
3、标签选择器
<span>124</span>
<div>
<span>234</span>
</div><!--CSS-->
span{
color: #000;
font-weight: bold;
/*加粗字体*/
}标签选择器比较简单，就是想对那个标签动手，就在CSS中写这个标签的名字，然后在括号中定义样式就行了。需要注意的是，这种方式定义的选择器，是对整个项目中的全部该类标签生效的。
4、通配符选择器
/*通配符选择器*/
*{
background-color: green;
}通配符选择器是对全部的标签都生效，包括HTML的<body>标签。一般来说，都是用通配符选择器对所有的标签进行初始化用的。
二、选择器权值
经过上面的几个基本的选择器介绍，已经可以进行基本的CSS编写了。但是，在编写的过程中，你会发现，有时候定义的样式会被覆盖掉。比如，我们在HTML中对一个标签进行行间样式引入，同时再对该标签定义一个选择器，选择器中定义同样的属性，那么在运行后，行间定义的样式覆盖了选择器中定义的样式，这是为什么呢？
在CSS中，有一个东西叫做权重。我们在进行CSS样式引入的时候，浏览器会根据不同选择器或者引入CSS方式的权值，来确定到底应用哪一个选择器定义的CSS样式。权值高的会覆盖权值低的选择器的样式。
注意，这里的1000,100等等数值，不是十进制数，而是256进制数，所以1000>>>100>>>10>>>1;
css权重
选择器 权值
！important Infinity(正无穷)
行间样式 1000(256进制)
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
因此，在对同一个标签进行CSS样式定义时，一定要看好自己定义的选择器权值是多少，会不会被覆盖掉。权值高的覆盖权值低的，权值相同时，后面定义的会覆盖前面定义的。
无论选用什么选择器，只要该样式后面加上了 “! important”，该样式就一定会被应用，且不会被任何选择器覆盖。
三、复杂选择器
1、父子选择器
<div>
<span>父子选择器</span>
</div>
<span>234</span>CSS样式：
/**
1、一号父子选择器，选择div（父标签）内的span（子）标签,指明这个定义的是div标签下的span标签样式
*/
div span{
background-color: red;
}
span{
background-color:black;
}
/**
二号父子选择器，由id选择器+标签选择器构成
*/
#divId span{
background-color:black;
}
/**
三号父子选择器
*/
.divClass span{
background-color:white;
}
这里的 div span{} 父子选择器实际上是建立在标签选择器的基础上，就是通过父标签名+子标签名的形式，更加具体的指明是哪一个标签。事实上，父子选择器只是指明父子关系，明确我们需要定义CSS样式的标签的具体路径，因此 ，可以用多种方式来构成父子选择器。如果一对父标签和子标签都有 id、class属性值，那么他们的父子选择器构成方式可以是
【父标签的标签名/id/class属性值】 【子标签的标签名/id/class属性值】{ 。。。 }
如果这里再新建一个div盒子
<div id="divId" class="divClass">
<span></span>
</div>那么，这个div标签下的span标签到底会运用上面的哪个选择器呢？
根据上面我们说的权重，我们可以发现，第一个父子选择器，是有两个标签选择器构成，这个父子选择器的权值为两个标签选择器权值相加，为2；而第二个父子选择器是有 id选择器和标签选择器构成，权值相加后为101；同理，第三个选择器是有class选择器和标签选择器构成，权值为11，因此,在CSS样式上会应用第二个父子选择器定义的。
2、直接元素选择器
<!-- 直接子元素选择器 -->
<div>
<em>直接子元素选择器1</em>
<strong>
<em>直接子元素选择器2</em>
</strong>
</div>
-----------------下面是CSS文件中的内容-------------------------------------
/**
2、直接子元素选择器,本例是指div下em标签
*/
div>em{
background-color: green;
}
div>strong>em{
background-color:red;
}
/*
浏览器内部遍历父子选择器的顺序是自右向左的
*/与父子选择器的区别就是中间多了">"符号，定义方式和写路径名是差不多的。一样可以混杂四类基本选择器，遇到重复定义冲突时，还是计算权值来确定选择哪个。
3、并列选择器
<!-- 并列选择器 -->
<div>并列选择器1</div>
<div class="demo">并列选择器2</div>
<p class="demo">并列选择器3</p>
------------------------------------------------------------------
/*3、并列选择器*/
div .demo{
background-color: grey;
}并列选择器是对同一个标签的更详细指定。
4、分组选择器
分组选择器，适用于几个不同的标签都有相同的属性时。将标签的名字（或者id、class值）通过逗号隔开就行了。
<!-- 分组选择器 -->
<em>1</em>
<strong>2</strong>
<span>3</span>
-----------------------------------------------------------------------
/*4、分组选择器，几个选择器有共同的属性*/
em,
strong,
span{
background-color: red;
}
四、权值计算的例子
最后，再来个权值计算的例子，帮助大家理清权值在浏览器选择何种选择器中的作用。
<div class="classDiv" id="idDiv">
<p class="classP" id="idP">选择器权值实验</p>
</div>
--------------------以下是CSS文件中的内容---------------------------------
/*都是对同一个标签（div下的p标签）进行的CSS样式定义*/
#idDiv .classP{
background-color: red;
}
.classDiv .classP{
background-color: green;
}
/**
#idDiv #idP{
background-color:#f44;
}
.classDiv #idP{
background-color: #ff5;
}
*/
第一个是 id选择器 +class选择器构成的父子选择器，id选择器权重为100，class选择器权重为10，所以该父子选择器总权重为110
第二个选择器是由两个class选择器组成的父子选择器，该选择器总的权重为20，由于第一个父子选择器的权重大于第二个父子选择器，故浏览器只是用第一个父子选择器的内容。
思考：
如果将注释中的两个父子选择器也加上去，那么浏览器会选择哪个？
如果只将注释中的第二个选择器加上去，浏览器会选哪个？
