代码之家 › 专栏 › 技术社区 › nanobar

基于没有类的祖先的CSS选择器

css-selectors css html

nanobar · 技术社区 · 5 年前

我想基于祖先中不存在的另一个类来设计类的样式。

div:not(.evil-class) .element {
  background-color: green;
}

<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

不知道为什么这样不行?

我知道我可以做相反的事情;将一个样式应用到两个元素,然后覆盖那个样式,但我不想这样做,因为我会覆盖可能在第三方库中发生更改的样式。

谢谢。

1 回复 | 直到 5 年前

Quentin 5 年前

div:not(.evil-class) .element 意思是“课堂上的东西” 要素那个是源于 div 哪个没有课 恶阶级 “

元素不是从任何 div,所以 div:not(.evil-class) 与任何祖先都不匹配 <body> 和 <html> 在这种情况下)。

目前没有办法在CSS中表示“没有一个祖先具有特定的类”。

Selectors Level 4 建议允许 :not() 要包含复杂的选择器,将来您可以执行以下操作:

.element:not(div.evil-class *) {
  background-color: green;
}

<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

当前支持浏览器 almost non-existent 但是上面的演示适用于当前版本的Safari。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前