Question

我有以下代码，我试图根据.v-list附加到哪个类但未成功使用nth-child或nth的四个.v-list__tile p元素之一进行选择类型正确地定位到我想要的第一个元素。这是标记：

<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>

如果.v-list具有一类“价格”，我希望仅第一个 .v-list__tile p元素具有样式。如果.v-list具有“ timing”类，我希望仅第二个 .v-list__tile p元素具有样式。这是我感到困惑的地方：实际上，我可以选择第一个带有nth-child的p元素 except ，但是选择第一个child或nth-child（1）可以为 all添加样式而不是第一个元素。

.price div:nth-child(1) p{
   border-bottom:1px solid #009FD4; //doesn't work- selects *all* p elements//
 } 
.timing div:nth-child(2) p{
   border-bottom:1px solid #009FD4; //works- selects only the second p element//
 }
.options div:nth-child(3) p{
   border-bottom:1px solid #009FD4; //works- selects only the third p element//
 }
.review div:nth-child4) p{
   border-bottom:1px solid #009FD4; //works- selects only the fourth p element//
 }

我如何写出一些仅针对第一个.v-list__tile p的CSS？

Answer 1

您要让CSS在主div .price 中查找所有div。而且，由于您在 .price 中的所有div都包含另一个子div（ v-list__tile ），因此总会有第一个div。当您定位第二个或第三个孩子时，由于div内没有第二个或第三个div角色： listitem ，那么这一切似乎都奏效了（但事实并非如此）。很有可能您的结构就是这个结构，并且结构末尾的div不超过一格。如果仅将直接后代作为目标，则可以实现所需的目标。

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

我希望这会有所帮助：https://css-tricks.com/child-and-sibling-selectors/

Answer 2

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

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

您可以改用它

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

使用第n个类型或第n个子元素来定位元素？

2 个答案: