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;
}

9.多标签查找顺序，浏览器由右向左，减少时间，最快速

 

7.css 权重

！important        Infinity 正无穷

行间样式            1000

id                        100

class|属性|伪类   10

标签|伪元素         1

通配符                  0

优先级 

!important>行间样式>id>class | 属性>标签>通配符