看到一个很有意思的CSS权重问题：

<div class="outer" id="app">
  <div class="inner">
    <p class="highlight">测试文本</p>
  </div>
</div>

#app .inner:not(#div) .highlight {
  color: red;
}

#app .highlight:nth-of-type(1):nth-last-of-type(1) {
  color: blue;
}

这个 测试文本 是什么颜色

先按照我理解的选择器权重来判断一下

!imporntant > 行内（1000）> id (100) > class或者伪类 （10）> 元素或者伪元素(1) > *

这样算下来:

• 第一个权重总和是 100 + 10 * 2 + 10 = 130

• 第二个权重总和是 100 + 10 * 3 = 130

第二个在后面，就近原则么~ 我选择第二个 是蓝色

但是测试下来是红色的

我不知道的CSS权重细节

要特别注意 :not() 伪类，在优先级计算中不会被看作是伪类，但是在计算选择器数量时会把 其中的选择器 当做普通选择器进行计数

（:not()）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级） –MDN

再回首看题目重新计算权重

• 权重为：100 (#app) + 10 (.inner) + 100 (#div) + 10 (.highlight) = 220
• 权重为：100 (#app) + 10 (.highlight) + 10 (:nth-of-type(1)) + 10 (:nth-last-of-type(1)) = 130

所以最终颜色为红色， interesting

:not()

CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

• :not(.foo) 将匹配任何非 .foo 的元素，包括html body

  这意味着:not(.foo) 是给非 .foo 的元素加权重的，自身没有权重的作用，受到html body影响会使自身继承样式

  比如：

  <p>测试文本</p>

  :not(p) {
     color: red;
  }

  自身也变成了红色，为了避免影响，就必须给自身一点权重，如：

  p {
      color: black;
  }
  :not(p) {
      color: red;
  }

  这样p就是 黑色 了

• 可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。 这就是一开始题目使用到的策略

再总结下权重吧

1. 不同的权重，权重高的生效
2. 相同的权重：就近原则，最后一个覆盖之前的
3. 无论多少个元素组成的选择器，都没有一个class选择器权重高，每个选择器的权重都有上限，就是1000 100 10 1
4. 反选伪类:not() 自身没有权重，但是他与选择器结合，其中的选择器会有权重，计算不能忽略其中的选择器

参考：

• 你应该知道的一些事情——CSS 权重

• 优先级 - CSS | MDN