一.选择器的权重值
选择器权重值比较：
！important infinity 无穷大
行间样式 1000
id 100
class|属性选择器|伪类 10
标签选择器|伪元素 1
通配符 0
二.css常用选择器
1.id选择器、class选择器、标签选择器、属性选择器、通配符选择器
2.父子选择器/派生选择器、直接子元素选择器、并列选择器、分组选择器、相邻兄弟选择器
下面是html、css代码演示与讲解：
id选择器：#属性值{}
<div id="only">123</div>
#only{
background-color:red;
}
class选择器：.{}
<div class="demo1">234</div>
.demo1{
background:yellow;
}
.demo2{
color:#f40;
}
<!-- class与元素的关系是多对多的，所以同一元素上可以对应多个class(demo1,demo2),中间加上空格 -->
<div class="demo1 demo2">345</div>
标签选择器（以span标签为例）：span{}
<span>456</span>
<div>
<span>567</span>
</div>
span{
color:aqua;
font-weigh:bolder;
}
<!-- 标签选择器能同时选择所有的标签，如选择所有的span标签,456,567同时变化,无论套了多少层标签都能被选出来 -->
通配符选择器：*{}
*{
background-color:green;
}<!-- 通配符选择器*，能选择所有的标签,意思是所有的标签都有的属性，表示所有的标签都遵循的统一样式。 -->
属性选择器：
属性选择器：[属性名="属性值"]
<div id="only" class="demo1">123</div>
[id="only"]{
background-color:red;
}
属性选择器可以写属性值如only，也可以不写,属性选择器的属性可以不是标签。
1. 父子选择器/派生选择器：标签1+空格+标签2
<span>456</span>
<div>
<span>567</span>
</div>
要求只使用span选择器让567变红，
div (空格)span{
background-color:red;
}
<div >
<span >
<em>
145
</em>
</span>
</div>
div span em{
background-color:red;
}
2. 直接子元素选择器:标签1>标签2
使123为红色
<div >
<em>123</em>
<span >
<em>
145
</em>
</span>
</div>
div > em{
background-color:red;}
3. 并列选择器：标签1+.+标签2
并列选择器:多个限定条件限制一个元素，并且不加空格，标签选择器需要放在其他选择器的前面，id选择器不用，位置随意
<div>1</div>
<div class="demo1">2</div>
<p class="demo2">3</p>
使2变成红色
div.demo1{
background-color:red;
}
4. 分组选择器：标签1，标签2，标签3，....5
分组选择器：
<div>1</div>
<span>2</span>
<em>3</em>
要求：123背景颜色均变成红色
方案一：
div{
background-color:red;
height:10px;
width:10px;
}
span{
background-color:red;
height:20px;
width:25ppx;
}
em{
background-color:red;
width:15px;
}
分组选择器：
div,span,em{
background-color:red;
}
div{
height:10px;
width:10px;
}
span{
height:20px;
width:25ppx;
}
em{
width:15px;
5.相邻兄弟选择器：标签1+标签2
相邻兄弟选择器,同一父级下的二个兄弟， 相邻兄弟选择器使用了加号（+）
h1+h2{color: pink;}