如何用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>

我希望第七个 li 没有bullet.Is这可以用css完成，因为我不允许更改html

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

ul

＆＃13;

＆＃13;

＆＃13;

在评论li中提及的其他元素只能包含零个或多个ol元素，最终会与ul和ul li:nth-child(7) { list-style-type: none; }元素混合使用。因此，您可以将html标记更改为有效，如：

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

你也可以这样做以准确地抓住nth-child ..

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