@TOC
什么是选择器
每一条css样式声明由两部分组成：
选择器{
样式;
}
选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
有哪几种选择器
标签选择器
标签选择器其实就是html代码中的标签：
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。em并不等于固定的px，1em表示父级元素的字体大小。各浏览器默认情况下==1em=16px==。
类选择器
通过 .类名{}设置元素样式：
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
.dv{
color: black;
}
</style>
</head>
<body>
<div class="dv">
我是一个div
</div>
</body>
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）
ID选择器
通过 #ID名{}设置元素样式：
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
#dv{
color: black;
}
</style>
</head>
<body>
<div id="dv">
我是一个div
</div>
</body>
1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
3、id属性的值既为当前标签的id，尽量见名思意，语义化
类和ID选择器的区别
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
<style type="text/css">
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
</style>
</head>
<body>
<p class="stress bigsize">使用类选择器样式设置成功</p>
<p id="stressid bigsizeid">使用ID选择器样式设置失败</p>
</body>
子选择器
>用于选择指定标签元素的第一代子元素：
<style type="text/css">
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">类名为first下的
<span>标签被设置红色边框样式</span>
这里不会有特殊样式</p>
</body>
后代选择器
语法糖为空格，用于选择指定标签元素下的后辈元素：
<style type="text/css">
.food li{
border:1px solid red;
}
</style>
</head>
<body>
<ul class="food">
<li>川菜
<ul>
<li>水煮肉片</li>
<li>夫妻肺片</li>
</ul>
</li>
<li>新疆菜
<ul>
<li>大盘鸡</li>
<li>烤全羊</li>
</ul>
</li>
</ul>
</body>
后代选择器与子选择器的区别
子选择器（child selector）仅是指它的直接后代，作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素（上述栗子中所有的li标签包裹的菜都会被单独设置指定样式）
后代选择器通过==空格==来进行选择，而子选择器是通过>进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器
通用选择器是功能最强大的选择器，它使用一个*号指定，作用是匹配html中所有标签元素，下面代码将html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
伪类选择器
伪类选择符允许通过:hover给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上述css代码表示a 标签中元素鼠标滑过的状态为字体颜色变红。
<h6>不要被伪类选择器名字给骗了，它并不是只能作用于类标签上。相反，:hover 可以放在任意的标签上，比如说 p:hover。</h6>
但是它们的兼容性很不好，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了，所以现在比较常用的还是 a:hover 的组合。
分组选择器
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符,，如下代码为h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
选择器的优先级
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
.dv{
color: black;
}
#div{
color: orange;
}
div{
color: blue;
}
*{
color: aqua;
}
</style>
</head>
<body>
<div id="div" class="dv" style="color: red">
我是一个div，用来测试不同选择器的优先级
</div>
</body>
1、如果一个元素使用了多个选择器，则会按照选择器的优先级来给定样式
2、结合上述实栗，可以看出选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
权值的计算
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？下面我们一起来看一下代码：
p{color:red;}
.first{color:green;}
<p class="first">测试文本</p>
p和.first都匹配到了p这个标签上，但是为什么显示绿色呢？因为浏览器是根据权值高低来判断优先使用哪种css样式的。
<h4>标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。</h4>例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
特殊情况
在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值。这时候我们可以使用!important来解决。
p{color:red!important;} /*权值为1*/
.first{color:green;} /*权值为10*/
<p class="first">无言独上西楼，月如钩</p> /*文本被设置成红色*/
!important要写在分号的前面
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时样式优先级为：==浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式==，但是!important优先级样式是个例外，权值高于用户自己设置的样式
总结：!important拥有最高权值，于是开始为所欲为
