2020-05-25

CSS样式引入优先级

作者:青花
转载请注源

常见的CSS样式分为三种引入方式：
1.标签内直接插入：
<style="...">
2.内嵌在页面中：
<style type="text/css"> 
body{
    margin-bottom:55px;
    width:100%;
}
p {
    color:blue
}
</style>

3.创建CSS文件，引入到网页中：
例如：css.css，目录为同级目录下的子目录css
在页面创建引入标签：
<link rel="stylesheet" href="css/css.css" />


优先级说明：
标签内的样式(例如：<a style="color:#fff;">菜单</a>)优先于内嵌样式和外部引入样式；

内嵌样式ID写法（例如：#abc{color:#fff;}）优先于外部样式；

外部样式（例如：a.css样式文件，引入到网页中<link rel="stylesheet" href="css/a.css" />），其优先级大于内嵌样式标签写法（例如：a{color:#fff;}）,这个优先级存在不确定因素，但大多数情况下，外部引入的独立css样式会优先生效于内嵌标签样式的，具体看写法，因为大多数情况是这样，所以外部引入在这里就视为优先；

外部样式（例如：a.css样式文件，引入到网页中<link rel="stylesheet" href="css/a.css" />），其优先级大于内嵌样式自定义标签写法（例如：.a{color:#fff;}），与上面一样，但大多数情况下，外部引入的独立css样式会优先生效于内嵌自定义标签样式，具体还是看写法，同样是大多数情况外部嵌入优先，所以外部引入在这里就视为优先；

行内元素标签内的CSS样式优先级要大于块级元素标签的CSS样式；
例1：颜色是#005654
<div style="color:#fff;">
<a style="color:#005654;">
菜单
</a>
</div>
例2：div的样式是css1，但不包含<a>的内容，a的样式是css2
<div id="css1">
<a  id="css2">
菜单
</a>
</div>
例3：div的样式是123，但不包含<a>的内容，a的样式是456
<div class="123">
<a calss="456">
菜单
</a>
</div>
例4：div的样式是白色文字，但是仅对没有独立设置style的行内元素生效，即，菜单1是白色，但菜单2是红色的；
<div style="color:#fff;">
<a>
菜单1
</a>
<a calss="456">  (#456{color:red;})
菜单2
</a>
</div>

      由此证明，无论是怎么个引入的方式（或写法），子级元素的设定相对于其自身而言都是大于它的父级的，因为块级元素负责的是区域元素，而行内元素负责的是自身的，也就是细节元素，除非使用结构伪类来改变优先级。
      此外，非必要时，css样式引入不要放在js引入的后面，这样会导致页面加载缓慢或异常，页面样式的载入要优先于页面其它处理事件。