如何为嵌套结构中的首个与末尾.one-third.column元素编写CSS选择器

嘿，我懂你的困扰！你之前写的选择器之所以会选中每一个.one-third.column，是因为每个<a>标签都是独立的父容器，里面的.one-third.column本身就是各自父元素的first-child和last-child，所以所有元素都被匹配到了。

要实现只选中整个.row下第一个<a>里的目标元素和最后一个<a>里的目标元素，你需要先定位到首尾的<a>标签，再去选择它们内部的.one-third.column。试试下面这组选择器：

/* 为第一个<a>标签内的.one-third.column移除左内边距 */
.row a:first-child > .one-third.column {
  padding-left: 0;
}

/* 为最后一个<a>标签内的.one-third.column移除右内边距 */
.row a:last-child > .one-third.column {
  padding-right: 0;
}

原理说明： #

• .row a:first-child：精准匹配.row容器下的第一个<a>子元素，再通过>选择器选中它的直接子元素.one-third.column，这样就只会作用在第一个目标元素上。
• .row a:last-child：同理，匹配.row容器下的最后一个<a>子元素，再选中它内部的目标元素，不会影响中间的元素。

如果你的.row容器下除了<a>还有其他类型的子元素，也可以用:first-of-type和:last-of-type来确保只选中<a>标签：

.row a:first-of-type > .one-third.column {
  padding-left: 0;
}

.row a:last-of-type > .one-third.column {
  padding-right: 0;
}

这样就能在不新增额外类名的前提下，实现你想要的样式效果啦！

内容的提问来源于stack exchange，提问作者user319940