CSS选择器和优先级

选择器

选择器可以帮助我们选中需要添加样式的标签

1、标签名选择器：通过标签的名称找到指定标签

格式：元素名{ }

2、类选择器：通过标签的class属性值选中指定标签,多个标签可以有相同的class值

格式：.d1{ }

3、id选择器：通过id找到标签，一个html文件中id不能重复

格式： #id{}

4、派生选择器（后代选择器）：类似于路径，找到符合要求的标签，会匹配所有的后代标签

格式： ul li a{} #id li a{}

5、子元素选择器：和后代类似，但是只能获得子元素

格式： ul>li>a{}

6、分组选择器：可以将多种选择器结合到一起使用，用来统一设定样式

格式: h1,h2,#abc,.m{ }

7、伪元素选择器：伪元素选择器选择的是元素的状态，状态分为以下几种：

link 表示元素未被点击时的状态
hover 表示鼠标悬停时的状态
active 表示元素被点击时的状态
visited 表示元素被点击后的状态
格式： #id:hover{ }

总结选择器：标签名选择器，类选择器，id选择器，派生选择器，子元素选择器，分组选择器，伪元素选择器

优先级问题

1. ！important 特殊性最高，

* {
    font-size: 24px !important;
 }

2. css中权重最高的样式为行内样式，就是以style=“”方式直接加入到HTML标签内的样式，其在css优先级中具有最高的权重。工作中不推荐使用，不能复用。1000

<div style="color: red; border: 1px solid blue">我是一个div</div>

3. 其次是ID选择器，ID选择器由于每一个ID在代码中只能出现一次，和唯一指向性，具有第二高的权重。100
4. 对于选择器中给定的类属性值，属性选择或伪类 10
5. 对于选择器中给定的元素选择器和伪元素 1

优先级（多种引入方式操作同一个标签，以哪个为准）

内联优先级最高

<div style="color: red; border: 1px solid blue">我是一个div</div>

内部和外部同时存在，则就近原则

内部
<style type="text/css">h2{color: purple; background-color: green;}</style>
外部
<link rel="stylesheet" href="first.css">

标签默认效果优先级最低