选择器优先级别

单纯的CSS文件

当我们创建一个CSS文档时,经常遇到样式定义冲突的情况,这时遵从以下规则。

  • 当一个HTML元素被定义多重CSS样式时,只有最后一个是可见的。如:
p {color: red}
p {color: blue}
/* 效果为蓝色 */
  • 当CSS样式定义在DOM元素的父级节点时,所有的子级元素都会继承该样式。
  • 同一元素存在不同的选择方式时,根据权重进行计算,权重越高越优先:
  • ID属性=100
  • class属性=10
  • HTML<>标签=1
  • 无论何种情况,使用 !important 标记,可以把选择器优先级提高到最前。
<body>
<p id="target" class="target">Hello World</p>
</body>

<style>
   p#target {color: black !important}
   p#target {color: red}
   p.target {color: blue}
   p {color: tomato}
   /* 最终效果为黑色 */
</style>

在HTML文件中使用CSS

有多种方法可以把CSS文件导入到HTML中,通常在HTML中出现位置的顺序为:

  1. 在<head>部分通过<link>导入外部样式
  2. 在<head>部分直接写入<style>
  3. 在CSS部分通过 @import 导入外部样式
  4. 直接定义在HTML标签中的style属性

然而,优先级的顺序确是:

  1. 直接定义在HTML标签中的style属性
  2. 在<head>部分直接写入的<style>
  3. 在CSS部分通过 @import 导入的外部样式
  4. 在<head>部分通过<link>导入的外部样式

在以下代码片段中四种导入CSS的方法都使用了,最终呈现出的效果,是级别最高的p标签中的style定义。除非,有 !important 在其他定义方式中出现。

<!DOCTYPE html>
<html>
   <head>
      /* Link in head */
      <link rel="stylesheet" href="css/style.css"/>
      /* Style tag in head */
      <style>
         p {color: tomato}
      </style>
      /* @import in CSS area */
      <style>
         @import url("css/style.css");
      </style>
   </head>
   <body>
      /* Style attribute in HTML element */
      <p style="color: red">Hello World</p>
   </body>
</html>
    原文作者:Kou_Guandong
    原文地址: https://www.jianshu.com/p/da9891fcb446
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞