Css 具有后代选择器特异性的通用选择器

我有一个通用布局组件，它需要在子组件之间设置一个垂直空间：

.container > * + * {
  margin-top: 1rem;
}

由于我不想深入讨论的原因，我不能保证组件样式的加载顺序

如果子组件已应用了对其边距的重置，例如

.child {
  margin: 0
}

…并在

.container

css之后加载，其样式将获胜，因为通配符选择器没有特殊性，这意味着两个声明的权重相等（因此最后一个声明将获胜）

我不想让容器知道或关心它的子类是什么（我也不想给所有子类添加特定的类）

---

是否有任何方法可以增加第一个选择器的特异性，同时保留其通用性（因此它适用于任何子项）。通过添加选择器

.container > * + [class] 

您可以获得一个更具体的选择器，它似乎适用于保证金规则

您还可以按照建议使用：not（）规则

.container、.container2、.container3{
背景颜色：黄花；
边框：1px纯黑；
显示：块；
边缘底部：50px；
}
.container>***{
页边顶部：1rem；
}
.container2>*+*，
.container2>*+[class]{
页边顶部：1rem；
}
.容器3：不是（#你梦想过电羊吗）>**{
页边顶部：1rem；
}
.孩子{
保证金：0；
高度：20px；
背景色：红色；
颜色：黑色；
}
福巴先生{
高度：20px；
背景色：黑色；
颜色：白色；
}

没有“修复”
福巴
小孩
福巴
小孩
福巴
正课
使用[class]“修复”
福巴
小孩
福巴
小孩
福巴
正课
使用：not（#doyoudreamofelectricsheep）“fix”
福巴
小孩
福巴
小孩
福巴
正课

一个更优雅的替代方案（即，在不需要特殊性破解的情况下提供您所需的额外特殊性）是

它在功能上等同于原始选择器，比原始选择器（0，1，0）具有（0，2，0）的特异性

.container{
保证金：1rem 0；
边框样式：实心；
}
/*1类，1伪类->特异性=（0,2,0）*/
.container>：非（：第一个子级）{
页边顶部：1rem；
}
/*1类->特异性=（0,1,0）*/
.孩子{
保证金：0；
}

小孩
小孩
小孩
小孩
小孩
小孩

像这样使用

not（）

。容器：not（#random_ID）>*+*related/@Temani Afif:ID是多余的。一个简单的类型选择器就足够了：

.container:not（）>*+*

@BoltClock true。我更多的是考虑一个选择器，它可以击败任何其他选择器，即使是多类、pseuo类。@TemaniAfif-如果这就是目标，那么这就是

！重要信息

适用于。对于

所关注的所有问题！重要信息

是核选项，考虑到选择器的严格限制和最小声明集，这是一个相当外科手术的打击。@Alohci确实如此。我想我们都在四处走动，忘记了

！重要信息

，这是一个简单而合乎逻辑的解决方案。谢谢。这很有趣-您使用的是一个没有值的“类”属性选择器。我想知道浏览器对此的支持是什么样的。似乎是浏览器可能会选择忽略的东西。不，他们都应该遵守它。class属性是否存在。所以它会忽略

，但它会捕获

它是有效的css。通过这种方式，您还可以使用

[data some custom attribute]{color:red；}

为

选择。我经常使用它，我测试过的所有移动浏览器和桌面浏览器，甚至旧的浏览器都支持这一点。我在snippet.OK中添加了一个示例。所以它就像一个开关。这是有道理的。我想您的方法唯一的缺点是它要求孩子至少有一个类，但这几乎是给定的。您也可以使用：not（）hack。这真的取决于你和你的代码库的其他部分，什么将有助于确保你得到正确的选择器。另外，您注意到我实现了双重选择，用逗号分隔匹配的两个条件

.container>*+*，.container*+[class]

这意味着它选择那些没有类和有类的。另一个基于伪类的替代方法是

.container>：第n个子（n+2）

.container > :not(:first-child)