css选择器优先级顺序

在两个或多少CSS规则应用于同元素上时,不同级别的优先顺序从到高低是？

直接检查 CSS 选择器首选项：ID > Class > Tag > Pseudo Class > Descendants。

具体例子：id > .class div {color: red}，优先级为id(1 000) > .class(01 00) > div(001 0)。

像 a:hover 这样的伪类的优先级较低，但高于派生选择器。

!important 涵盖了所有内容，请谨慎使用，例如 id {color: black !important}。

继承属性的优先级最低。
例如，body 中的 p 继承了 body 颜色。

项目中常见：.active header {color: blue}，优先级 header (1 000) > .active (01 00)。

记得测试：nav > li:hover {color: green}，优先级 nav(1 000) > li(001 0) > :hover(0001 )。

称一下体重。

了解CSS的选择器优先级和!important权重

上周，在创建网站布局时，我遇到了选择器优先级问题。
一位朋友告诉我，CSS 选择器从优先级最低到最高依次是标签选择器、.class 选择器和 id 选择器。
我尝试了一下，发现确实如此。
例如，h2 标签中的样式被 .box 类中的样式覆盖。

2 02 3 年，我学到了新的知识点。
也就是说，重要的属性具有最高的权重。
我实验发现，即使ID选择器样式更具体，添加!important也会强制h2 文本颜色为红色。

我不确定这部分，但我记得在一个项目中我在某种样式之后添加了 !important 以防止它被覆盖。

我的一个朋友告诉我 !important 非常有用，但是你不应该滥用它，因为如果你过度依赖它，将很难保持你的风格。
因此，通常通过组合选择器或增加选择器特异性来提高优先级。
由你决定。
首先，让我们使用组合选择器检查效果。
我不在乎。

css选择器组合与优先级如何计算

CSS 是一回事......老实说它有点令人困惑。
记住选择器组合方法：
1 ．后代选择器：用空格分隔。
例如，div p 选择 div 中的所有 p 标签，无论它们嵌套的深度如何。
简单来说，只要它在div的肚子里，它就是目标。

2 子元素选择器：大于>号。
ul > li，只选择ul直生的li，孙子不计算在内。
比如ul下面有li，那下面还有li，只选择第一个li。

3 相邻兄弟选择器：加号+。
h1 + p，选择紧接在 h1 之后的 p。
如果h1 后面有两个p，则选择第一个。

4 通用同级选择器：波形符~。
h1 ~ p，选择h1 之后同一层的所有p，不管它们之间的距离。

5 属性选择器：方括号[]。
input[type="text"]，选择类型为文本的输入。
具体属性值得引用。

6 伪类伪元素：冒号：。
a:hover，鼠标置于链接上时的状态。
p::firstline，p 标记中的第一行文本。
这两个必须连续写。

优先级计算比较复杂：
值：写在样式内时计1 ，写在外部时计0。
例如，