css - nth-child 第一个和最后一个都应用于元素

Question

我正在尝试为以下标记编写一个选择器:

<div class="row">
    <a href="#">
        <div class="one-third column">content</div>
    </a>
    <a href="#">
        <div class="one-third column">content</div>
    </a>
    <a href="#">
        <div class="one-third column">content</div>
    </a>
</div>

选择器应该获取第一个 .one-third.column 和最后一个 .one-third.column 并应用一些自定义 CSS。

到目前为止我已经尝试过:

.row a > .one-third:first-child {
    padding-left: 0;
}

.row a > .one-third:last-child {
    padding-right: 0;
}

但是，这会导致上述两个选择器都应用于每个三分之一的元素。我试图在不向第一个和最后一个元素添加类的情况下实现这一目标。如有任何帮助，我们将不胜感激。

Answer 1

这可以完成，但是您需要选择链接的第一个和最后一个子链接。如果您要进入链接内部并选择只有一个元素的第一个和最后一个子元素，则您所需的样式将无法工作。如果您选择第一个和最后一个 a 标记，您将获得所需的结果:

.row a:first-child .one-third {
  padding-left: 0;
}

.row a:last-child .one-third {
  padding-right: 0;
}

<div class="row">
  <a href="#">
    <div class="one-third column">content</div>
  </a>
  <a href="#">
    <div class="one-third column">content</div>
  </a>
  <a href="#">
    <div class="one-third column">content</div>
  </a>
</div>

这是一个用背景颜色显示的 fiddle :https://jsfiddle.net/oprkd3vp/

希望这有帮助。