Является ли: не псевдокласс повышением специфичности селектора?

Ответ 1

Да, это добавляет специфика его аргумента. Посмотрите на первое предложение:

Специфика класса: not pseudo - это специфика его аргумента.. Псевдокласс: not() не добавляет специфичности селектора, в отличие от других псевдоклассов.

Таким образом, спецификация .red:not(.blue) равна характеристике селекторов класса .red.blue - 2 или (0, 2, 0), что делает его более конкретным, чем .red самостоятельно. Второе предложение означает, что сам :not() не вносит дополнительной специфичности псевдокласса, чтобы сделать его (0, 3, 0), например, как :hover in .red.blue:hover.

Ответ 2

Селектор :not не имеет собственной специфичности, однако селектор внутри :not() действительно имеет.

Из MDN

Типы селекторов

Следующий список типов селекторов - это увеличение специфичности:

• Селектора типов (например, h1) и псевдоэлементы (например, :before).
• Селектора классов (например, .example), селектора атрибутов (например, [type="radio"]) и псевдоклассы (например, :hover).
• ID селектора (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и псевдо-класс отрицания (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), делают.)

Поскольку у вас есть правило .red:not(.blue), а элемент <div class="red"> не имеет класса blue, это правило применяется.

.red:not(.blue) {
  background: blue;
}

.red {
  height: 100px;
  width: 100px;
  background: red;
}
div {
  background: green;
  width: 50px;
  height: 50px;
  margin: 10px;
}

<div></div>
<div class="red"></div>
<div class="blue"></div>