选择器优先级与 4中引入样式方式

Posted 2020-10-30 RocketV2

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择器优先级与 4中引入样式方式相关的知识，希望对你有一定的参考价值。

　　这里涉及css样式加载顺序、覆盖规则，以及优先级提升问题；

　　1. css样式加载顺序

// a.css
.one{
    color: red;
}

// c.css
.three{
    color: green;
}

<head>
    <link href=\'\'./a.css">
    
    <style>
          .two{
              color:gray;
          }
    </style>

    <link href="./c.css">
</head>
<body>

    <div class="one two three"></div>    
    <div class="one three two"></div>   

    <p class="two one three" style="color:yellow;"></p>

</body>

　　结果：这两个<div>字体显示的都是green；<p>显示的是yellow；

　　原因如下：

　　　　样式的加载顺序是 a.css ---> <style> ---> c.css；这个加载顺序很重要，因为涉及到覆盖规则；

　　　　选择器的优先级与在元素中书写顺序无关；class="one two three"，class="three two one"等顺序不影响优先级；

同级选择器中，选择器书写顺序越靠后，优先级越高！后面的总是覆盖前面的；【覆盖规则】

　　　　元素中的style样式优先级最高！

　　2.几点说明

　　　　2.1 "元素中的style" > "文件头中的style" > "外部文件中的样式"

这句话很概况性，存在让大家误解的地方；其中“元素中的style”优先级最高是正确的，但是后面关于头文件中的style、link引用的外部文件就不正确的；

　　　　　　不正确的原因：与css样式加载顺序有关，比如上面的举例中，c.css文件晚于<style>加载；开篇例子已经说明了这个问题；

　　　　2.2 元素选择器越精确，对应的样式优先级越高

　　　　　　id选择器 > 类选择器 > 元素选择器

　　　　　　元素中的样式大于id选择器； <p class="two one three" style="color:yellow;"></p>

　　　　2.3 优先级提升 !important

　　　　　　属性使用了!important，此时此属性优先级最高

　　3.选择器权值

　　　　每种选择器都有对应的权值；总共有四类：

　　　　4个等级的定义如下：

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为100。
3. 第三等：代表伪类和属性选择器，如.content，权值为10。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

// d.css
p.five{
    color:red;
}
// 权值 p=1 .five=10  ,valTotal=10+1=11

<p style="color:white;"></p>  // 权值1000

　　4.就近原则

　　　　样式优先级理论上：行内>内嵌>链接>导入，

　　　　但实际上可能有所变化，实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高

　　CSS 优先级法则：

　　　　A 选择器都有一个权值，权值越大越优先；

　　　　B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；[就近原则、覆盖原则]

　　　　C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

　　　　D 继承的CSS 样式不如后来指定的CSS 样式；

　　　　E 在同一组属性设置中标有“!important”规则的优先级最大；

css引入样式的四种方式

　　1. 内联样式

　　2.内部引入

　　　　<head>

　　　　　　<style>

　　　　　　　　　　。。。

　　　　　　</style>

　　　　</head>

　　3. 外部链接 <link>

　　4. 外部引入 @import url()

　　　　这种语法可以写在外部文件中、<style></style>，但是有点要注意：@import要先于css规则写，否则无效

// 无效书写方式，一定要先于css规则
<style>
    #bgc{background-color: green}
    @import "@import.css";
</style>

　　　　一般不使用@import，因为@import会打乱并行下载，而且会打乱下载顺序；

　　　　如果使用@import，引用的文件会变得同步下载；

　　　　所以推荐使用<link>，<link>是html的语法，@import是CSS的语法；　　　　

以上是关于选择器优先级与 4中引入样式方式的主要内容，如果未能解决你的问题，请参考以下文章

Java学习总结（二十四）——前端：CSS样式设计（CSS引入，选择器，盒子模型，浮动元素）

web前端篇：CSS使用，样式表特征，选择器

选择器优先级 与 4中引入样式方式

选择器优先级与 4中引入样式方式