我的选择器具有最大的特异性，但仍然没有被应用。为什么不？

Question

我正在尝试使用特定的类继承来定位元素。使用Chrome开发工具时，我发现该风格是特定的，但它仍然被划掉并且没有被使用。

我正在使用SASS和以下代码：

.post-item, .post-type-project, .project, .type-project {
    .post-text {
        width: calc(35% - 15px);
    }
}

我不想使用!important黑客，因为它违反了其他CSS规则。

Answer 1

作为CSS特异性的快速入门，您可以使用base-10方法计算规则的“权重”。

elements & pseudo-elements =    1
classes & pseudo-classes   =   10
id's                       =  100
inline                     = 1000

因此，在此示例中，您方案中的第一条规则是：

0 elements & pseudo-elements =    1 * 0 =    0
5 classes & pseudo-classes   =   10 * 5 =   50
0 id's                       =  100 * 0 =    0
0 inline                     = 1000 * 0 =    0
                                  TOTAL =   50

计算你的规则，你的特异性为30（3个等级）。为了优先考虑，它需要有一个大于50的值（或者恰好是50，并在另一个规则之后声明）。

虽然您可以向列表中添加单个ID，并且它会将特性提高到足以覆盖第一个规则，但您也将规则限制为仅一个特定位置。虽然您已避免使用!important标记，但您已经引入了另一个问题。

考虑一下你是在试图确保门被锁定，但是有这个规则：

house door.exterior {
    state: unlocked;
}

爱丽丝不在家，你想确保爱丽丝的门被锁定，所以你指定：

#alice door.exterior {
    state: locked;
}

鲍勃和卡罗尔不在家的时候：

#carol door.exterior,
#bob door.exterior,
#alice door.exterior {
    state: locked;
}

我们已经完成了锁门，但我们都增加了维护问题并且模糊了锁门的原因。我们需要为每个想要锁定房屋的人添加规则。通过使用具有语义意义的较低特异性规则，我们会好得多。

house.owner-away door.exterior {
    state: locked;
}

CSS通常是一种过于具体而又不够具体的平衡行为。在这种情况下，您尝试覆盖的规则有2个覆盖您的规则的语义类，它指定它适用于post-list中的帖子，仅适用于{{1}之后的post-text }}。如果这些规则也适用于您的规则，请使用它们，如果没有，请环顾四周，看看您可以使用哪些其他更通用的规则。

注意虽然base-10方法是表示相对特异性的简单方法，但每个级别的单个选择器将覆盖下一个任意数量的选择器。例如，有11个元素选择器不会覆盖1个类，即使此方法将以更高的值计算它。

Answer 2

这样做，通过添加一个项目来增加嵌套

body{
.post-item, .post-type-project, .project, .type-project {
  .post-text {
    width: calc(35% - 15px);
  }
}
}

或

body .post-item, body .post-type-project, body .project, body .type-project {
  .post-text {
    width: calc(35% - 15px);
  }
}
}

Answer 3

尝试验证您的代码在编译文件中的位置较低。否则，尝试通过id加强选择器的权重（例如）：

#parentContainer{ 
  .post-item, .post-type-project, .project, .type-project {
    .post-text {
      width: calc(35% - 15px);
    }
  }
}