文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将样式应用于不包含CSS中特定类的元素

问如何将样式应用于不包含CSS中特定类的元素
EN

Stack Overflow用户

提问于 2022-01-05 15:55:23

回答 1查看 79关注 0票数 -1

如果父元素不包含CSS中的某个类子元素，我希望将样式应用于父元素。为了让它更好地理解，我做了一个演示，

.level-1 {
  width: 400px;
  background: green;
}

.level-3 {
  color: white;
  font-size: 32px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <div class='level-1'>
      <div class='level-2'>
          <div class='level-3'>This is text 1</div>
      </div>
    </div>
    <div class='level-1'>
      <div class='level-2'>
        <div class='level-3'>This is text 2</div>
      </div>
    </div>
    <div class='level-1'>
      <div class='level-2'>
        This is text 3
      </div>
    </div>
  </div>
</body>
</html>

在上面的示例场景中，我希望级别-1下的所有元素都采用width of 400px，但是如果level-1包含级别-3类名元素，那么我不需要400px的宽度。我试过使用:not选择器，但做不到，我试着这样做，

.level-1:not(.level-3) {
  width: 400px;
  background: green;
}

我知道我可以通过classList.contains在Javascript上做这件事，但是我想通过CSS来做。是否有方法可以达到上述的要求？

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-01-05 16:35:31

您可以在第1级类中添加另一个类，以便更具体地使用CSS选择器，即对那些没有级别-3类名称元素的div元素应用特定的宽度。

.level-1.include {
        width: 400px;
        background: green;
      }

      .level-3 {
        background: green;
        color: white;
        font-size: 32px;
      }

<div>
      <div class="level-1 include">
        <div class="level-2">
          <div class="level-3">This is text 1</div>
        </div>
      </div>
      <div class="level-1">
        <div class="level-2">
          <div class="level-3">This is text 2</div>
        </div>
      </div>
      <div class="level-1 include">
        <div class="level-2">This is text 3</div>
      </div>
    </div>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70595833

复制

相似问题

问如何将样式应用于不包含CSS中特定类的元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将样式应用于不包含CSS中特定类的元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将样式应用于不包含CSS中特定类的元素
EN