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>

这是一个用背景颜色显示的小提琴：https://jsfiddle.net/oprkd3vp/

希望这有帮助。

Answer 2

您可以使用css的nth-child（n）选择器

https://www.w3schools.com/cssref/sel_nth-child.asp

.row a:nth-child(1) {
    padding-left: 0;
}

.row a:nth-child(3) {
    padding-left: 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>

nth-child first和last都应用于元素

2 个答案: