Question

我以前在列表项中有锚元素并且可以使用“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>

Answer 1

这里有两个问题：

您无法交换a和li元素的位置。 ul可以包含的唯一子项是li个元素。此类列表唯一有效的结构是ul > li > a。
除了有效性之外，您的规则不再匹配的原因是因为您的第一条规则仍定位li元素，但您的第二条规则定位a元素。他们针对的是不同的元素，因此没有重叠。

您可以通过将一些CSS属性（例如填充）移动到a元素以及使其成为块来改变HTML，从而使可点击区域更大而不改变：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

正如评论所指出的那样，ul代码的直接子项必须始终为零或更多li个标记。

但是，您说这样做是为了增加可点击区域。您可以将a代码放回li代码中，然后制作a代码display : inline-block。然后，您可以在width : 100%上应用height : 100%和a来增加可点击区域（这将等于li的整个区域）。通过这种方式，您可以使用nth-child()定位第4个孩子。

您的代码变为：

HTML

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

CSS

section.social-section ul li {
    display: inline-block;
    position: relative;
}

section.social-section ul.group li:nth-child(4) a {
    display: inline-block;
    height : 100%; //not absolutely required
    height : 100%; //not absolutely required
}

您可以根据需要添加CSS属性以定位列表。

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

2 个答案: