impress 2020-01-01
1.id选择器,id是一一对应
<div id="only">123</div>
#only{
background-color: red;
}
2.class选择器,多对多关系
.demo{ background-color: black;}
3.标签选择器,css选择标签选择器,一选就是全部的
div{ background-color: black;}
4.通配符选择器
* 代表所有标签
5.属性选择器
[id] {
background-color: black;
}
[id="only"] {
background-color: black;
}
6.!important;
[id] {
background-color: black!important;
}
7.父子选择器/派生选择器(可以写3层甚至更多,不一定是标签选择器)
div span{ background-color: green;}
8.直接子元素选择器
div>span{ background-color: green;}
9.并列选择器(标签放在id和class 前面)
div.demo{ background-color: green;}
10.分组选择器(多个标签并列写,用逗号分隔)
em,strong,span{ background-color: green;}
11.多标签查找顺序,浏览器由右向左,减少时间,最快速
12.css 权重,一样的权重,后面的代码会覆盖前面的代码
!important Infinity 正无穷
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
13.优先级
!important>行间样式>id>class | 属性>标签>通配符