Html 使用第n个类型或第n个子元素作为目标元素？

我有下面的代码，根据.v-list所附加的类，我试图从四个.v-list\uu tile p元素中选择一个，但是没有成功地正确使用第n个子元素或第n个类型来定位我想要的第一个元素。这是标记：

<div role="list" class="v-list theme--light price">
  <div role="listitem">
    <div class="v-list__tile theme--light">
      <p><strong>Price</strong></p>
    </div>
   </div>
  <div role="listitem">
    <div class="v-list__tile theme--light">
      <p><strong>Timing</strong></p>
    </div>
  </div>
  <div role="listitem">
    <div class="v-list__tile theme--light">
      <p><strong>Options</strong></p>
    </div>
  </div>
  <div role="listitem">
   <div class="v-list__tile theme--light">
    <p><strong>Review/Submit</strong></p>
   </div>
  </div>
 </div>

---

如何编写一些css来只针对第一个.v-list\uu tile p？

您告诉css查找主div中的所有div。price。因为你所有的div都包含另一个子div（v-list\u tile），所以总是有第一个div。当你瞄准第二个或第三个孩子时，因为角色为：listitem的div中没有第二个或第三个div，所以这一切看起来都是可行的（但事实并非如此）。这只是一个机会，你的结构就是这一个，并且你的结构末尾没有超过一个div。 如果您只针对直接下降者，您将能够实现您想要的目标：

.price > div:nth-child(1) p{
   border:1px solid #009FD4; 
 } 

我希望这有助于：

：nth child（n）选择器匹配其父元素的第n个子元素（无论其类型如何）

这意味着您的第一行将应用于所有元素

你可以用这个来代替

.price .v-list__tile:first-child p {
    border:1px solid #009FD4;
}

.price .v-list__tile:first-child p {
    border:1px solid #009FD4;
}