为何CSS的:not()选择器不指定标签类型就无法正常工作？

为什么会出现这个问题？ #

核心是:not(.today)的匹配范围太宽泛——它会选中所有不带.today类的元素，包括<html>、<body>这些最外层的父容器。而你那个带.today的<span>里的.date，同时也是<html>（没有.today类）的后代，所以not(.today) .date这条规则会命中它，把颜色强制改成橙色，覆盖了.today的继承色。

至于加span后生效，是因为span:not(.today) .date把匹配范围限定在了**父级是不带.today的<span>**元素下的.date，带.today的那个<span>本身不符合这个条件，所以它下面的.date不会被这条规则影响，自然继承.today的蓝色。

无需指定span的解决办法 #

这里有几个靠谱的方案：

1. 精准限定:not的作用范围
   把not(.today) .date改成.day:not(.today) .date，只针对带有.day但没有.today的元素下的.date生效，完全不会干扰.today内的内容：

.day:not(.today) .date {
  color: orange;
}

2. 明确指定.today下.date的颜色
   直接给.today里的.date单独写规则，优先级和之前的规则一致，只要放在后面就能覆盖橙色规则：

.today {
  color: blue;
}
.today .date {
  color: blue;
}

3. 使用子选择器（结构固定时可用）
   如果.date一定是.day的直接子元素，可以用>子选择器缩小匹配范围，避免命中外层父元素的后代：

:not(.today) > .date {
  color: orange;
}

不过这个只适用于.date是直接子元素的场景，你的例子里是嵌套<span>，所以第一个方案更通用。

内容的提问来源于stack exchange，提问作者sudoExclamationExclamation