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

【问题标题】：Using nth of type or nth-child to target elements?使用第 n 个类型或第 n 个子元素来定位元素？
【发布时间】：2019-09-16 05:01:08
【问题描述】：

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

<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 有一个“计时”类，我希望 仅在第二个 .v-list__tile p 元素上附加样式。这就是我感到困惑的地方：我实际上可以选择所有除了第一个带有nth-child的p元素，但是选择第一个子元素或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//
 }

我怎样才能写出一些 css 来只针对第一个 .v-list__tile p？

【问题讨论】：

标签： html css css-selectors

【解决方案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/

【讨论】：

【解决方案2】：

:nth-child(n) 选择器匹配其父元素的第 n 个子元素，无论其类型如何。

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

你可以改用这个

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

【讨论】：