如何用css捕获这个nth-child()

Question

我有这个HTML代码

<ul>
<div id="consolidation-checkboxes-container" class="consolidation-checkboxes container" style="height: 104px;">                     
    <a href="" class="consolidation-link" target="_blank">
    <li>one</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
    <li>two</li>
    </a>
    <a href="" class="consolidation-link bordered" target="_blank">
    <li>three</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
    <li>four</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
    <li>five</li></a>
    <a href="" class="consolidation-link" target="_blank">
    <li>six</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
        <li>seven</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
        <li>eight</li>
    </a>

</div>
</ul>

我想第七个李没有子弹.这可能用css完成,因为我不允许更改html

Answer 1

如果您的html是您提供的html,则可以使用以下代码:

ul div a:nth-child(7) li {
  list-style-type: none;
}

<ul>
  <div id="consolidation-checkboxes-container" class="consolidation-checkboxes container" style="height: 104px;">
    <a href="" class="consolidation-link" target="_blank">
      <li>one</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>two</li>
    </a>
    <a href="" class="consolidation-link bordered" target="_blank">
      <li>three</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>four</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>five</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>six</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>seven</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>eight</li>
    </a>

  </div>
</ul>

另外如在留言内提及ul元件只能包含零个或多个li元件,最终与混合ol和ul元件.因此,您可以将html标记更改为有效,如:

ul li:nth-child(7) {
  list-style-type: none;
}

<ul>
  <li><a href="#" class="consolidation-link" target="_blank">one</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">two</a>
  </li>
  <li><a href="#" class="consolidation-link bordered" target="_blank">three</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">four</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">five</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">six</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">seven</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">eight</a>
  </li>
</ul>