Question

我想知道如何在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>

我想选择后面有<div>标记的所有<ul>，然后给它们padding-bottom: 16px。

我如何在JavaScript中执行此操作？

有没有办法在CSS中执行此操作？

Answer 1

CSS

.para:first-child

或JS

document.getElementsByClassName("para")[0]

Answer 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>

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

2 个答案: