试图使用我的父类firstRow定位子元素

Question

• 我正在尝试使用父类 firstRow 定位子元素。
• 但是我不成功。
• 我查看了下面的CSS选择器，然后仅实现了但仍然无法定位。 https://www.w3schools.com/csSref/css_selectors.asp
• 您能告诉我如何修复它，以便将来自己修复。
• 在下面提供我的代码段和沙箱

.firstRow div:nth-child(2) {
  background: green;
  width: 40px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="firstRow">
  <div>
    <p>test.</p>
    <p>test 2.</p>
  </div>
</div>

Answer 1

您要定位的孩子是p元素，而不是div元素：

.firstRow p:nth-child(2) {
  background: green;
  width: 40px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="firstRow">
  <div>
    <p>test.</p>
    <p>test 2.</p>
  </div>
</div>

Answer 2

:nth-child(n)当前元素的父元素的n^th子元素，因此您可以改用.firstRow p:nth-child(2)。

Answer 3

.firstRow div:nth-child(2) {
  background: green;
  width: 40px;
  height: 100px;
  border: 1px solid black;
}

<div class="firstRow"> <!-- parent -->
  <div> <!-- this is nth-child(1) -->
    <p>test.</p>
    <p>test 2.</p>
  </div>
  
  <div></div> <!-- this is nth-child(2) -->
</div>