选择器 问题：为什么要用选择器？ 回答：要使用CSS对html页面中的元素实现一对一、一对多或者多对一的控制。

1)元素选择符/类型选择符（element选择器） ——语法 元素名词{属性：属性值} 如div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li等 ——eg: div{width:100px; height:100px; backgroundcolor:red;} ——用法 改变某个元素的默认样式、统一文档某个元素的显示效果

1.类选择器

解决场景：同一类元素，一部分用A样式，另一部分用B样式 Class选择器，class的名必须是以“.”开始 语法： class 名 {属性：属性值；} 说明： a)使用class选择符时，应该先为每个元素定义一个class名称 b)class选择符的语法格式是： eg: .top{width:200px;height:100px;background:green;} 用法：class选择符更适合定义一类样式 c)一个元素可定义多个class名称，如果有冲突，按离元素的就近原则显示

2.id选择器（唯一选择）

语法：#id名{属性：属性值；} 说明： a)当我们使用id选择符时，应该为每个元素定义一个id属性 如： b)不能给一个元素设置两个id名

3.通配符选择器（选择所有）

语法：*{属性：属性值；} 说明：通配选择符的写法是“*”，其含义就是所有元素。 *{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值 使用场景：清除内外边距值

4.群组和后代选择器（加逗号，群组；不加逗号，后代）

A.群组选择器 语法：选择符1，选择符2，选择符3...... {属性：属性值；} eg: #top1, #nav1, h1 {width:90px;} 说明：有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。 margin:0 auto；实现盒子的水平居中

B.包含选择器

语法：选择符1，选择符2{属性：属性值；} 说明:含义就是选择符1中包含的所有选择符2； 用法：当我的元素存在父级元素时，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决 eg:结构 样式：.list li {background:red;}

5.伪类选择器

（主要用于超链接a标签，做出的效果是：鼠标悬停后有样式）

语法： a:link{属性：属性值；}超链接的初始状态；(a是超链接anchor的缩写)【可加导航栏的默认样式】 a:visited{属性：属性值；}超链接被访问后的状态； a:hover{属性：属性值；}鼠标悬停，即鼠标划过超链接时的状态；【可加导航栏的悬停样式】 a:active{属性:属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态 Link-visited-hover-active

说明： a)当这四个超链接伪类选择符联合使用时，应该注意她们的顺序，正常顺序为： a:link, a:visited, a:hover, a:active,错误的顺序有时候会使得超链接的样式失效； b)为了简化代码，可以把伪类选择器符中相同的声明提出来放在a选择符中； eg:a{color:red;}    a:hover{color:green;}    表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样

5.选择器总结——选择一类元素，用类选择器class(.) ——选择一类元素中的某个元素，或者单纯的某个元素，用Id选择器 （#） ——去除内外边距，用通配符选择器（*{margin:0;padding:0;} ——选择不同的元素，用群组选择器（,隔开） ——选择父元素下的子元素，用后代选择器（空格）

6.选择器的权重

（也就是相冲突时的选择器优先级）

类型/元素选择符（element选择器） 0001 Class选择器  0010 id选择器 0100 包含选择符  为包含选择符的权重之和（嵌套权重大于单个） 内联样式 1000 ！important 10000

小结：！important>行内>内联＞id选择器>类选择器＞元素选择器 1）Css选择器解析规则1：当不同选择符的设置样式有冲突时，高权重选择符的样式会覆盖低权重选择符的样式 2）Css选择器解析规则2：相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。