Question

我有一个嵌套的无序列表，我只想标记某个p标记。

<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>
<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>
<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>

基本上，我试图只将样式应用于具有内容类的第一个p标签，而没有一个对具有内容的嵌套p标签应用样式。我用“这里”表示该区域。

我尝试过使用.category-0> .depth-0> .submenu> p：last-child。我已经尝试过.content：first-of-type的所有变体都无济于事。那么，如何选择无序列表的顶级类别下的第一个实例？

还要注意...无序列表是通过Ruby迭代生成的，因此无法进行内联样式设置。

Answer 1

.depth-0 > .submenu > .content应该可以解决问题。

只要:last-child始终是p.content父级的:last-child，您的.submenu选择器也应该工作。

Answer 2

据我所知，：first-child选择器仅适用于同级。因此，您需要在无序列表元素上使用伪类：

.category-0:first-child p.content {
  color: green;
}

<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>
<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>
<ul class="category-0">
 <li class="depth-0">
  <div class="flex submenu">
   <p></p>
   <p class="content">Here</p>
  </div>
  <ul class="category-1">
   <li class="depth-1">
    <div class="flex submenu">
     <p></p>
     <p class="content"></p>
    </div>
   </li>
  </ul>
 </li>
</ul>

CSS定位无序列表中的顶级p标签

2 个答案: