代码之家 › 专栏 › 技术社区 › user319940

第n个子元素第一个和最后一个都应用于元素

css-selectors css

2

user319940 · 技术社区 · 7 年前

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

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

选择器应获得第一个。三分之一。列和最后一列。三分之一。列并应用一些自定义CSS。

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

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

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

然而,这会导致上述两个选择器应用于每三分之一的元素。我试图在不向第一个和最后一个元素添加类的情况下实现这一点。非常感谢您的帮助。

2 回复 | 直到 7 年前

1

4

VXp Kadir BuÅ¡atliÄ 7 年前

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

.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/

希望这有帮助。

2

0

ahmeticat 7 年前

您可以使用css的第n个子(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>