使用场景： 使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上。
class ：类选择器，指定标签的类名，定位到页面上某一类的元素 。
使用场景：使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。
* {} /* a=0 b=0 c=0 d=1 ->0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 ->0,0,0,1 */
a:hover {} /* a=0 b=0 c=1 d=1 ->0,0,1,1 */
ul li {} /* a=0 b=0 c=0 d=2 ->0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 ->0,0,0,3 */
h1+input[type=hidden]{} /* a=0 b=0 c=1 d=2 ->0,0,1,1 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 ->0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 ->0,1,1,1 */
div#header:after {} /* a=0 b=1 c=0 d=2 ->0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 ->1,0,0,0 */
先比较a，a大的权重最大，再依次比较b，c，d
#header{ }
id选择器，匹配特定id为header的元素
.header{ }
类选择器，匹配class包含header的元素
.header .logo{ }
后代选择器，匹配class为header元素所有的后代（不只是子元素、子元素向下递归）
calss为logo的元素
.header.mobile{ }
匹配class既有header又有logo的元素
.header p, .header h3{ }
同时匹配class为header所有后代元素p和class为header所有后代元素h3
#header .nav>li{ }
匹配id为header元素所有后代中calss为nav的所有直接子元素li
#header a:hover{ }
匹配id为header所有后代中鼠标悬停其上的a元素
#header .logo~p{ }
匹配id为header所有后代中class为logo之后的同级元素p（无论直接相邻与否）
#header input[type="text"]{ }
匹配id为header所有后代中属性type值为text的元素
n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even
<style>.item1:first-child{ color: red} .item1:first-of-type{ background: blue} </style><div class="ct"><p class="item1">aa</p><h3 class="item1">bb</h3><h3 class="item1">ccc</h3></div>
一、简单的选择器
1）标签选择器
与网页元素同名，用的最多，也简单，即直接作用于与该选择器名字相同的标签
2） 类选择器
能够为网页对象定义不同的样式类，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同样式
3）类选择器和标签结合在一起==>指定类选择器
指定该类用于特定的标签范围内
4）ID选择器（ID唯一）
这个就不举例讲解了，类比类选择器，把"."换成"# "即可
5）通配选择器
如果所有元素都需要定义相同的样式，推荐使用通配选择器
二、复合选择器
1）子选择器
2）相邻选择器（二者有相同父元素）
**利用相邻的兄弟元素来控制，即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示
3）包含选择器（后代选择器）
第一对象一定要内包含第二对象
4）选择器嵌套
5）属性选择器
属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。
1.匹配属性名选择器
2.扩展
3.匹配属性值选择器
4.模糊匹配属性值选择器
类似正则表达式
6）伪选择器和伪元素选择器
标签之间可以通过逗号隔开来设定多个标签的CSS样式
