css——优先级（权重）

最新推荐文章于 2023-02-11 23:56:27 发布

张旭豪

最新推荐文章于 2023-02-11 23:56:27 发布

阅读量731

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_40548203/article/details/122582050

版权

阅读本文需要一定的css基础如有需要可以先了解一下：css选择器

首先来说一下我们的核心CSS：

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
CSS 是开放网络的核心语言之一，由 W3C 规范实现跨浏览器的标准化。CSS节省了大量的工作。样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。——https://developer.mozilla.org/zh-CN/docs/Web/CSS

css所谓前端三大件中的一员，只要是做前端的，应该都写过css。虽然现在的ui库已经比较完善了，各种设计方案也是符合主流，但是也总有避免不了的需要自定义样式的需求，这时候就展示了我们css功底的时候到了。

在实际项目中有些人对于一些样式的优先级一直很困惑，为什么这个是优先的？为什么那个没有生效？最后不得不采用了一些比较“极端”的方案：内联样式、Important。但是一旦这些方案使用的多了，对于后期维护的开发人员来说是极其可怕的：基于现在的Important不得不继续Important下去，最后使得项目的样式权重只会越来越糟。

其实只要了解了css的优先级是如何计算的，根本不用写那么多的Important也能增加你的样式权重，来覆盖之前的样式。目前来说，我认为需要用到Important的场景只有两种：
1、覆盖内联样式的时候
2、编写全局固定样式的时候

那不适用Important的时候我们如何增加我们的css权重呢？多增加我们的选择器描述选择程度：

.myDiv{
  color:red;
}
[id="box"].myDiv{  
  color:green
}

<div id="box" class="myDiv">box</div>    <!-- red -->
<div id="case" class="myDiv">case</div>  <!-- green -->

细心的同学可能已经注意到了上面的id选择器没有直接用#box的方式来作为css的选择器而是使用了属性选择器来匹配。那为什么要这么做呢？可以看下面：

[id="box"]{  
  color:green
}
.myClass{  
  color:red 
}

#case{  
  color:green
}
.myDiv{  
  color:red 
}

<div id="box" class="myClass">box</div>  <!-- red -->
<div id="case" class="myDiv">case</div>  <!-- green -->

是因为id选择器的权重比类选择器和属性选择器都高，而类选择器和属性选择器的权重在同一级别。在使用了属性选择器之后可以使用同一权重的类选择器来覆盖样式，但是id选择器之后无法使用同一权重以下的选择器来增加其权重了。这样一来那又如何增加我们的id选择器的权重呢？

[id="box"]{  
  color:green
}
.myClass{  
  color:red 
}

#case{  
  color:green
}
#case.myDiv{  
  color:red 
}

<div id="box" class="myClass">box</div>  <!-- red -->
<div id="case" class="myDiv">case</div>  <!-- red -->

类似这样，使用组合器在我们id选择器原基础上增加其他选择器来增加权重比。

说到这里，当前的选择器权重比等级是怎么分划的呢？我这里列一下：

类型选择器（例如：h1）和伪元素（例如：::before）<
类选择器 (例：.example)，属性选择器（例：[type=“radio”]）和伪类（例如：:hover）（此处注意:is() 和 :not() 是例外，这俩自身没有权重等级）<
ID 选择器（例：#example) <
内联样式<
important（例：.example!important)

在这里我们使用MDN的方式来说css的权重就是所谓的四位数：

已经知道一个元素选择器比类选择器的优先级更低会被其覆盖。本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千四位数的 (分离的) 四个位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

注: 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

为什么说分离的四个位数呢？因为虽然这里用了个十百千的说法，但是它们没有进位，低位选择器使用了再多权重分也不会超过高位权重，只会超过同位及更低的权重。

下面写几个例子来说明上面的说法：


.test:hover  {} /* 权重 0011*/
#test:hover  {} /* 权重 0101*/
#test.test:hover  {} /* 权重 0111*/
.a.b.c.d.e.f.g.h.i.j.k{}/* 权重 00(11)0   
这里是我个人理解的写法，无法进位，只在当前位置有11个权重分*/