为何为ol.meaning下的li:last-child添加padding-bottom无效？

为什么.meaning > li:last-child无效？ #

你写的这个选择器用了直接子元素选择器>，它只能匹配<ol class="meaning">的直接子级<li>——也就是那些带.meaning-word类的元素。但<li class="sentence-en">和<li class="sentence-de">是嵌套在<ul class="sentences">里的，属于<ol>的孙子元素，不是直接子元素，所以这个选择器根本选不到它们。

两种可行的解决方法 #

方法一：全局匹配所有层级的最后一个li #

如果不需要区分嵌套层级，直接给.meaning下所有<li>的最后一项加内边距：

.meaning li:last-child {
  padding-bottom: 20px; /* 替换成你需要的数值 */
}

这个选择器会覆盖三种场景：

• 最后一项是.meaning-word
• 最后一项是嵌套在ul里的.sentence-en
• 最后一项是嵌套在ul里的.sentence-de

方法二：精准匹配最后一个子元素的情况 #

如果想更精准，只针对<ol>的最后一个子元素（不管是li还是ul）处理：

/* 处理ol最后一个直接子元素是li的情况 */
.meaning > li:last-child,
/* 处理ol最后一个直接子元素是ul时，选中ul里的最后一个li */
.meaning > ul:last-child li:last-child {
  padding-bottom: 20px;
}

这种写法不会影响.meaning中间嵌套的ul里的li，只处理整个列表的最后一项。

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