CSS 如何找到子元素？ [复制]答案

【问题标题】：How does CSS find a child element ? [duplicate]CSS 如何找到子元素？ [复制]
【发布时间】：2017-08-29 13:38:10
【问题描述】：

考虑以下代码：

<h2>
  Working example
</h2>
<div class="test">
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
  Not working example - no DIVs
  </h2>
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
  Not working example - Divs
  </h2>
  <div>
    <button>FirstChild (Yellow)</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>LastChild (Red)</button>
  </div>
</div>

还有以下 CSS：

.test button:first-child {
  background: yellow;
}

.test button:last-child {
  background: red;
}

.test button:not(:last-child):not(:first-child) {
  background: cyan;
}

结果：

如果子按钮元素位于 div 内或中间有另一个元素 (h2)，为什么找不到我的 CSS？测试 div 中没有其他按钮元素。

如何让这个 CSS 考虑 3 种给定的情况以及正确的行为（工作示例）？

JSFiddle here

【问题讨论】：

这不起作用，因为它们不是其相同父容器的第一个/最后一个子容器。
button:first-child 表示：第一个子元素和按钮元素。必须满足这两个要求。
感谢@zerkms 的提示。我需要的是“在子树中找到的第一个按钮”或类似的东西......有没有办法做到这一点？
@Mendes first-of-type 是你想要的，而不是 first-child

标签： html css

【解决方案1】：

.test button:first-child 这在第一个有效，但在第二个失败，因为 .test 的第一个孩子是 h2 不是按钮

解决方案：

CSS 中的顺序很重要，因此首先将 .test 下的所有按钮设置为绿色，然后将 first/last 设置为它们的颜色。

您应该使用first-of-type 和last-of-type 来定位兄弟姐妹中的第一个类型（按钮或div），或者兄弟姐妹中的最后一个，如果您不确定兄弟姐妹，您应该认真阅读以下内容：

相邻兄弟选择器

https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

.test button {
  background: green;
}

.test > button:first-of-type,
.test div:first-of-type button {
  background: yellow;
}

.test > button:last-of-type,
.test div:last-of-type button {
  background: red;
}

<h2>
  Working example
</h2>
<div class="test">
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
    Not working example - no DIVs
  </h2>
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
    Not working example - Divs
  </h2>
  <div>
    <button>FirstChild (Yellow)</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>LastChild (Red)</button>
  </div>
</div>

【讨论】：

感谢 Daniel，但在 div 的情况下仍然无法正常工作（第三个示例）...
@Mendes 我知道，检查更新
@Mendes 重新加载页面，如果你没有看到它。

【解决方案2】：

显然您误解了:last-child 的含义以及它的工作原理。它不是按钮的内容，而是一组子元素中的最后一个元素。你的用法不正确。

你可以试试.test div:last-child button {color:red;}作为例子。

【讨论】：

知道了。我需要的是“找到的第一个按钮元素”......有没有办法找到它并修复我的代码？该建议也不适用于财产...

【解决方案3】：

找到子元素

.test button:first-child or .test button:nth-child(1)

.test button:nth-child(2)
.test button:nth-child(3)

.test button:last-child or  .test button:nth-child(4)

【讨论】：