css - 第 n 个 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/

希望这对您有所帮助。