html - 访问未知数量的 div 中的第一个

Question

给定以下标记:

<div className="row">
    <noscript></noscript>
</div>
<div className="row">
    <noscript></noscript>
</div>
<div className="row">
    <section></section>
</div>
<div className="row">
    <section></section>
</div>
<div className="row">
    <section></section>
</div>
...

顶部可能有任意数量的包含noscript的div。

如何只访问行中的第一个部分？

Answer 1

仅使用 CSS 是不可能实现的，您需要使用 Javascript。

解释:

因为 :nth-of-type(1), nth-child(), :first-of-type 和 :first-child 将始终为您提供所有部分，因为它们是第一个 child ，也是其父 div 中类型 section 的第一个。

所有这些选择器只有在您使用 class="row" 将所有部分放在一个父 div 中时才有效。

JavaScript 解决方案:

您可以使用 document.querySelector(".row section") 获取带有 class="row" 的 div 中的第一个部分。

但是使用 CSS 只有这样是不可能的:

document.querySelector(".row section").innerHTML = "I am the first section !";

.row {
  width: 200px;
  height: 50px;
  border: 1px solid black;
}

<div class="row">
  <noscript></noscript>
</div>
<div class="row">
  <noscript></noscript>
</div>
<div class="row">
  <section></section>
</div>
<div class="row">
  <section></section>
</div>
<div class="row">
  <section></section>
</div>

注意:

同样在 HTML 中它是 class="row" 而不是 className="row"，实际上是 className 在 Javascript 中使用。