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

Question

我想要定位一个具有特定类继承的元素。在使用Chrome开发工具时，我会发现该样式具有特定的样式，但仍然被划掉并未被使用。

我使用SASS和下面的代码：

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

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

Answer 1

尝试验证您的代码在编译的文件放在下增加嵌套。否则，试图通过一个ID，以加强你选择的重量（例如）：

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

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

至于对一般CSS特异性的快速入门，你可以使用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的门是锁着的，所以您可以指定：

#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中的帖子，并且仅适用于post-image后面的post-text。如果这些规则也适用于您的规则，请使用它们，如果没有，则环视四周，看看您可以使用哪些其他更一般的规则。

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