为什么要用选择器？
要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到css选择器。
元素选择符/类型选择符（element选择器）
语法：元素名称属性：属性值如：div,p,h1,img,a,span,iem,strong.b,ul.li.ol.li..等
说明：
- 元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符，例如body、div.p.img.em，strong.span…等。
- 所有的页面元素都可以作为选择符
用法：
- 如果想改变某个元素得默认样式时，可以使用类型选择符 （如：改变一个div、p、h1样式）
- 当统一文档某个元素的显示效果时，可以使用类型选择符 （如：改变文档所有p段落样式）
class选择器/类选择器
语法：class名{属性：属性值;}
说明：
- 当我们使用class选择符时，应先为每个元素定义一个class名称
- class选择符的语法格式是
- 定义名字选择时需要加.
- 可以加多个类名
- 可以多个标签共享一个class
- 多个class内容相同时采用重上往下读取的原则
如：<div class=”top></div>
top{width:200px;height:100px;background:green;}
用法：class选择符更适合定义一类样式。
ID选择器
语法：#id名{属性：属性值;}
说明：
- 当我们使用id选择符时，应该为每个元素定义一个id属性 如：<div id=”box”></div>
- id选择符的语法格式是“#”加上自定义的id名 如：#box{width:300px;height:300px;}
- 起名时要取英文名，不能用关键字：（所有的标记和属性都是关键字）如：head标记
- 一个id名称只能对应文档中一个具体的元素对象。（唯一性）
- 不能多个标签共享一个ID
通配符/通配选择器
语法：*{属性：属性值；}
说明：通配符的写法是“*”其含义就是所有元素。
*{margin:”0″; padding:{0};}代表清除所有元素的默认边距值和填充值。
群组选择器
语法：选择符1，选择符2，选择符3……{属性：属性值;} 例：#top1,#nav1，h1{width:960px;}
说明：
- 当有多个选择符应用相同的声明时，可以将选择符用“，“分隔的方式，合并为一组。 margin:0auto;实现盒子的水平居中
- 群组选择器：提出公共代码，节约代码量
包含选择器/后代选择器
语法：选择符1选择符2{属性：属性值；}
说明：含义就是选择符1中包含的所有选择符2
- 用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决
- 如：结构：
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>样式：.list li{background:red;}
- 空格 后代（包含）选择器
- 后代选择器是从右到左的匹配选择
伪类选择器
语法：
a:link{属性：属性值}超链接的初始状态
a:visited{属性：属性值}超链接被访问后的状态
a:hover{属性：属性值}鼠标悬停，即鼠标划过超链接时的状态
a:active{属性：属性值}超链接被激活时的状态，即鼠标按下时超链接的状态 Link–visited–hover–active。
说明：
- 当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为 a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效
- 为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中
- 例如：a{color:red;}a:hover{color:green;}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。
选择器的权重
- 当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生了冲突了，会选择权重的来执行
- 选择器权重 id>class>元素
© 版权声明
THE END
