如何定位覆盖列表项和无序列表中的最后一个锚点元素

Daniel Mejía 发表于 Dev

丹尼尔·梅加（Daniel Mejia）

我以前在列表项中包含了锚元素，可以使用“ nth-child（4）”来定位它，但是一旦我将锚元素放置在列表项之外以使可点击区域变大，它就变得无法定位。关于如何针对特定元素的任何建议？

section.social-section ul a li {
    width: 22%;
    display: inline-block;
    float: left;
    border: 1px solid #e2e0e0;
    margin-right: 30px;
    padding: 10px;
}

section.social-section ul.group a:nth-child(4) {
    margin-right: 0;
}

<!-- Social section -->
<section class="social-section">
  <ul class="group">
    <a href="#">
      <li>facebook</li>
    </a>
    <a href="#">
      <li>twitter</li>
    </a>
    <a href="#">
      <li>pinterest</li>
    </a>
    <a href="#">
      <li>google+</li>
    </a>
  </ul>
</section>

螺栓时钟

这里有两个问题：

您不能像这样交换您a和li元素的位置。一个元素ul可以包含的唯一子li元素。此类列表的唯一有效结构是ul > li > a。
除了有效性之外，您的规则不再匹配的原因是，您的第一条规则仍以li元素为目标，而第二条规则以a元素为目标。它们针对的是不同的元素，因此没有覆盖发生。

您可以通过将一些CSS属性（例如，填充到a元素上）以及将它们设置为块来增加可点击区域，而无需更改HTML，而无需更改HTML ：

section.social-section ul li {
    width: 22%;
    display: block;
    float: left;
    border: 1px solid #e2e0e0;
    margin-right: 30px;
}

section.social-section ul.group li:nth-child(4) {
    margin-right: 0;
}

section.social-section ul li a {
    display: block;
    padding: 10px;
}

<!-- Social section -->
<section class="social-section">
    <ul class="group">
        <li><a href="#">facebook</a>
        <li><a href="#">twitter</a>
        <li><a href="#">pinterest</a>
        <li><a href="#">google+</a>
    </ul>
</section>

（请注意，移动填充声明会使li元素的宽度减小，但出于此答案的目的，我忽略了这种副作用。）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。