我正在尝试为以下标记编写选择器：
<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.column和最后一个.one.column，并应用一些自定义CSS。
到目前为止，我已经尝试过：
.row a > .one-third:first-child {
padding-left: 0;
}
.row a > .one-third:last-child {
padding-right: 0;
}
但是，这导致上述两个选择器都应用于每个三分之一的元素。我试图在不向第一个和最后一个元素添加类的情况下实现这一目标。任何帮助表示赞赏。
可以这样做，但是您需要选择链接的第一个和最后一个孩子。如果您要进入链接并选择只有一个元素的元素的第一个和最后一个子元素，则所需的样式将无法使用。如果选择第一个和最后一个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/
希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句