CSS入门｜元素选择器、类选择器和ID选择器

选择器
问题：为什么要用选择器？
回答：要使用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:
<div class="top"></div>
.top{width:200px;height:100px;background:green;}
用法：class选择符更适合定义一类样式
c)一个元素可定义多个class名称，如果有冲突，按离元素的就近原则显示

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

语法：#id名{属性：属性值；}
说明：
a)当我们使用id选择符时，应该为每个元素定义一个id属性
如：<div id="box"></div>
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:结构<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
样式：.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：相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。