1.CSS样式优先权

默认样式实例

写上一个H1标签,不添加任何属性,你会发现所展示出来的仅仅是浏览器的默认样式.
我们在body标签写上一个style属性,会发现即使H1标签没有添加任何样式,但是仍然变色.
这是因为body标签作为H1标签的父元素,H1标签继承了body标签的样式.
因此我们可以得知,继承样式 > 默认样式.
由图可知,body标签的style属性仍然存在,但是我们在H1标签中也添加了一个style属性.
并且H1标签的style属性颜色为蓝色,而效果确实是蓝色.
那么我们可得知,最终优先权为：单个标签自身属性 > 继承样式 > 默认样式.
2.CSS引入方式以及引入方式优先权
通过学习,我们知道了CSS引入方式一共有三种
- 行内式
- 内联式
- 外链式
那么可以通过一些案例来了解一下这三者之间的优先权,看谁是老大,谁老二,谁老三.
我们通过外链一个CSS文件,在CSS文件中选中H1标签实现了更改掉H1标签的样式.
我们并没有删除外链的CSS样式,但是我们在HTML中写入的style标签,选中了H1标签.
覆盖掉外链CSS文件的样式,我们可以得知：内联式 > 外链式.
我们通过在某个标签的属性中添加一个style属性,并且更改一下颜色.
发现更改的颜色覆盖了内联式和外链式的颜色样式.
最终优先权为：行内式 > 内联式 > 外链式.
3CSS常用选择器
CSS常用选择器有如下几种
- 标签选择器
- 属性选择器
- 群组选择器
- 通配选择器
- 子元素选择器
  - 子元素选择器用：>
- 后代元素选择器
  - 后代元素选择器用空格
- 相邻兄弟选择器
  - 相邻兄弟选择器用：+
- 所有兄弟选择器
  - 所有兄弟选择器用：~
    4CSS权重分析方法
CSS权重代码是（0,0,0）.第一个0代表id,第二个0代表class,第三个0代表标签.
并且尽量不要使用ID,因为ID权重过大.