html - 尝试使用我的父类 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>