如何用原生JavaScript和CSS选择后接<ul>的<div>并设置内边距？

嘿，这个需求其实有两种靠谱的实现方式，先给你说最省心的CSS方案，再补JS的兼容方案～

如果你不需要兼容特别老旧的浏览器，用CSS的:has()伪类就能一步到位，这是目前最简洁的方案：

div:has(+ ul) {
  padding-bottom: 16px;
}

这里的+是相邻兄弟选择器，:has(+ ul)表示当前div元素的下一个直接相邻元素是ul，完美匹配你的需求。

兼容性说明：:has()是CSS Selectors Level 4的特性，Chrome 105+、Firefox 121+、Safari 15.4+都支持，如果你要兼容IE这类旧浏览器，就需要用下面的JS方案了。

如果需要兼容不支持:has()的环境，可以用原生JS遍历判断：

// 获取页面中所有div元素
const allDivs = document.querySelectorAll('div');

// 遍历每个div，检查下一个兄弟元素
allDivs.forEach(div => {
  // 拿到下一个直接元素节点（跳过文本/注释节点）
  const nextElement = div.nextElementSibling;
  // 判断是否是ul元素
  if (nextElement && nextElement.tagName === 'UL') {
    div.style.paddingBottom = '16px';
  }
});

或者用更简洁的链式写法：

Array.from(document.querySelectorAll('div'))
  .filter(div => {
    const next = div.nextElementSibling;
    return next && next.tagName === 'UL';
  })
  .forEach(div => div.style.paddingBottom = '16px');

注意这里用nextElementSibling而不是nextSibling，因为nextSibling会把换行、空格这类文本节点也算进去，nextElementSibling只返回元素节点，判断更准确。

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