如何將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不是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並且：不要在這里使用psuedo類。 但是這會將樣式應用於除了容器特殊div之外的所有其他標簽。

.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;
}

Answer 2

如果你使用jQuery，你可以像這樣訪問元素：

$('.content-body > :not(#container-special)').parent().css("max-width", "1050px")

或者對於普通的JS，您可以設置CSS：

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

然后從包含具有該ID的元素的元素中刪除它：

var cs = document.getElementById('container-special')
var parent = cs.parentElement

if (parent.className == 'content-body') {
  parent.style.maxWidth = "initial"
}

Answer 3

只需稍微更改您的標記：

從

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

至

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

這允許你制定

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

如果您無法更改標記，可以通過Javascript添加該類：

document.addEventListener('DOMContentLoaded', function() {
  const el = document.querySelector('.content-body #container-special:first-child');
  if (el) el.parentElement.classList.add('has-container-special');
})