我如何将CSS应用于所有元素，除非第一个孩子具有特定ID

Question

问题陈述

我如何将CSS应用于特定类的所有元素，除非第一个孩子具有特定ID？

例子

我有如下的HTML：

HTML示例1

<div class="content-body">
  <div>
  </div>
</div>

HTML示例2

<div class="content-body">
  <div id="container-special">
  </div>
</div>

CSS如下：

.content-body {
  max-width: 1050px;
}

现在，我希望css仅在第一个子div不是of时才适用id=container-special，即，我希望css仅在示例1中生效。

我尝试过的

我已经考虑过css选择器:first-child和not，但无法弄清楚如何将其应用于我的情况。

任何帮助表示赞赏。

Update1 [解决方案]

感谢所有回答我的问题的人。根据提供的输入，我使用以下解决方案：

.content-body {
  max-width: 1050px;
}

// called when component containing <div id="container-special> is loaded
fixParentContainerWidthOnMount() {
  const cr = document.getElementById('container-special')
  const parent = cr.parentElement
  if (parent.className.includes('content-body')) {
    parent.classList.remove('content-body')
  }
}

// called when component containing <div id="container-special> is unloaded
fixParentContainerWidthOnDestroy() {
  const cr = document.getElementById('container-special')
  const parent = cr.parentElement
  if (
    parent.className.includes('container') &&
    !parent.className.includes('content-body')
  ) {
    parent.classList.add('content-body')
  }
}

Answer 1

在这里，您必须使用css选择器类型的组合。您必须在此处使用child-combinator和：not psuedo类。但这会将样式应用于除容器特殊div外的content-body下的所有其他标签。

.content-body>:not(#container-special) {
  max-width: 1050px;
}

但是，如果要防止将样式应用于整个div。您还需要在HTML代码中进行一些更改。

的HTML

<div class="content-body" id="container-special">
  <div></div>
</div>

的CSS

.content-body:not(#container-special) {
  max-width: 1050px;
}