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

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

css-selectors css

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

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/

希望这有帮助。

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>

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

2 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

7 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

7 年前

Christian Luneborg · 星级评定不起作用

7 年前

Gabriel Morais · CSS未应用媒体查询

7 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

7 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

7 年前

Karos papermoon · Div和定位问题

7 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

7 年前