如何用css捕获这个nth子()

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实现bullet.Is，因为我不允许更改html。

Answer 1

你也可以这样做来抓住第n个孩子..。

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

Answer 2

如果您提供的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>

​