css - X 的所有后代以及 X 本身是否有一个 CSS 选择器？

Question

如果我想选择一个 ID 为“Parent”的元素及其所有后代，我可以这样做：

#Parent, #Parent * { ... }

我的问题是：是否有一个与上述等效的选择器不需要重复#Parent两次？

换句话说，是否有一个选择器可以一次选择一个元素及其所有后代？

---

这是一个可以使用的片段，感兴趣的选择器在哪里#left, #left *以及在哪里：#right, #right *

#layout { display: flex; }
#layout > div { flex: 1 }
#layout * { border: 1px solid black; margin: 4px; padding: 4px; }

/* #left _and_ its descendants */
#left, #left * { border-color: #f0f; }

/* #right _and_ its descendants */
#right, #right * { border-color: #0ff; }

<div id="layout">
  <div id="left">
    <div>test</div>
    <div><span>test</span><span>test</span></div>
    <div>test</div>
  </div>
  <div id="right">
    <div>test</div>
    <div><span>test</span><span>test</span></div>
    <div>test</div>
  </div>
</div>

标签： csscss-selectors

Answer 1

如果它只是关于颜色或相同的属性/值，那么使用 CSS 变量：

#layout { display: flex; }
#layout > div { flex: 1 }
#layout * { border: 1px solid var(--c,black); margin: 4px; padding: 4px; }

/* #left _and_ its descendants */
#left  { --c: #f0f; }

/* #right _and_ its descendants */
#right  { --c: #0ff; }

<div id="layout">
  <div id="left">
    <div>test</div>
    <div><span>test</span><span>test</span></div>
    <div>test</div>
  </div>
  <div id="right">
    <div>test</div>
    <div><span>test</span><span>test</span></div>
    <div>test</div>
  </div>
</div>