Css选择器
CSS代码用来修饰 HTML元素. 要用CSS代码设置样式, 首先要选中HTML元素.
用来选中 元素的 代码称为 选择器, 或 选择符.
html元素是指, 标签与标签包裹内容的整体.
常用的选择器有如下几种：
1、标签选择器
标签选择器，此种选择器影响范围大.
举例：
*{margin:0;padding:0}
div{color:red}
<div>…</div> <!-- 对应以上两条样式 -->
<div class=“box”>…</div> <!-- 对应以上两条样式 -->
2、id选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：
#box{color:red}
<div id=“box”>…</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
3、类选择器
class 选择器用于描述一组元素的样式,class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class=“red”>…</div>
<h1 class=“red big mt10”>…</h1>
<p class=“red mt10”>…</p>
4、后代选择器
后代选取器匹配所有当前元素的后代元素。 举例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>…</span>
<a href="#" class="red">…</a>
</div>
<h3 class=“red”>…</h3>
5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。也称为 并列选择
举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class=“box1”>…</div>
<div class=“box2”>…</div>
<div class=“box3”>…</div>
6、伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
<div class="box1">…</div>
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在该元素上时 */
a:before{content:“Hello”;} /在每个<a>元素之前插入内容/
a:after{content:“world”;} /在每个<a>元素之后插入内容/
7.其他选择器(了解)
.item>p{} 子元素选择器:与后代选择器相比，子元素选择器只能选择某元素的子元素。 input[name=username]{} 属性选择器 :通过特定的属性来查找元素li:list-child{} 选择最后一个li元素li:first-child{} 选择第一个li元素li:nth-child(2){} 选择指定的第几li元素
选择器之间的优先级别
标签选择器 1 类选择器 10 ID选择器 100 行内样式 1000 伪类选择器 10 属性选择器 10 关系选择器 拆开后 权重值相加注意: 1) 数值越大, 权重越高 2) 权重值相同的情况下, 后面的胜出
