Question

我想选择所有带有 p 类的标签，即 .row

的孩子

.row .p {
   ...
}

但排除所有将 .disable 作为父类（不是直接）的所有内容。

我可以选择这两个：

.row .p {
  border: 3px solid blue;
}

.disable .row .p {
  border: 3px solid red;;
}

但我们只想使用一个选择器

注意：.disable和.row之间的可以是任何元素。

清除： .disable .row .p应该没有颜色。因此，如果.disable以某种方式出现在父行中，则不要创建蓝色边框。把它扔掉。

例如： https://codepen.io/miladfm/pen/ELbwMx

Answer 1

Using CSS Custom Properties（也称为CSS变量）如果您为此祖先设置一个值并在前者上获取其值，则可以根据某个祖先设置元素的样式。它是在强大的cascade®中继承的，如果没有设置，你可以使用var(--custom-prop, fallback)

的回退给出的默认值

支持Edge 15+或16+以及其他现代浏览器更长时间AFAIK

/* If any ascendant has a given class, no border */
.disable {
  --parent-disable-border: none;
}

/* Default border with fallback value of a CSS Variable / Custom Property */
.p {
  border: var(--parent-disable-border, 3px solid blue);
}

Codepen（抱歉没有在Firefox中失败的代码片段）

CSS选择器：不是（...）[父有一些类]

1 个答案: