JavaScript 选择特定子元素之后的特定元素答案

【问题标题】：JavaScript select specific child element that specific element after itJavaScript 选择特定子元素之后的特定元素
【发布时间】：2018-03-09 16:10:42
【问题描述】：

我想知道如何在 vanilla JavaScript 中选择特定的子元素/具有<ul> 元素的子元素。

<ul>
  <li>
    <div class="para">Test1</div>
    <div class="para">Test2</div>
    <ul>
      <li>
        <div class="para">Test 3</div>
      </li>

      <li>
        <div class="para">Test 4</div>
      </li>

      <li>
        <div class="para">Test 5</div>
      </li>
    </ul>
  </li>
</ul>

我想选择所有后面有<ul>标签的<div>s，并给他们padding-bottom: 16px。

如何在 JavaScript 中做到这一点？

有没有办法在 CSS 中做到这一点？

【问题讨论】：

你是说香草JS吗？正如你已经标记了 jQuery 和 React。此外，是的，您可以严格地在 CSS 中执行此操作 - 一些基本的谷歌搜索会告诉您这一点。
后面的具体元素是什么？你提到你想选择测试 1，但它之后的元素是无关紧要的。
@revilheart 我更新了问题。我想选择所有后面有
@Eunicorn 还是看不懂。所有后面都有标签的s？什么？
@revilheart 你会看到

标签： javascript html css

【解决方案1】：

CSS

.para:first-child

或在 JS 中

document.getElementsByClassName("para")[0]

【讨论】：

【解决方案2】：

不确定这是否实用，但我不知道有任何 CSS 方法可以做到这一点。据我所知，有一些选择器用于选择在它们之前具有特定元素的元素，但不是在之后。

let element, elements, i, n;
elements = document.getElementsByTagName(`div`); // get all div elements in the page
for (i = 0, n = elements.length; i < n; i++) {
    element = elements[i];
    if (element.nextElementSibling && element.nextElementSibling.tagName === `UL`) {
        // check if the next element is a UL element
        element.style.paddingBottom = `16px`;
    }
}

<ul>
  <li>
    <div class="para">Test1</div>
    <div class="para">Test2</div>
    <ul>
      <li>
        <div class="para">Test 2</div>
      </li>

      <li>
        <div class="para">Test 3</div>
      </li>

      <li>
        <div class="para">Test 4</div>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

@jhpratt 不，它没有。如果您将 Test1 替换为 Test 2 ，则会将填充添加到第二个元素。
@revilheart 不，我不是在寻找包含特定文本的元素。我希望选择所有
元素后有
元素的元素。你知道怎么做吗？
@Eunicorn 用可能的解决方案编辑了我的答案。