javascript - 使用 Javascript 将新类添加到 HTML/CSS 中的子容器

Question

我是 javascript、HTML 和 CSS 的初学者。我想尝试是否有一种方法可以通过父容器类访问子容器类。或者我可以通过“第一”类向“第二”类添加一个新类(“second_new”)。

/* CSS */
.first {
  background-color: red;
}

.first_new {
  background-color: pink;
}

.second {
  background-color: blue;
}

.second_new {
  background-color: purple;
}

<!-- HTML -->
<div class="row">
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  
</div>
<!-- JAVASCRIPT -->
<script>
    var firstClass = document.getElementsByClassName("first");

    function Mousein() {
        this.classList.add("first_new");

    };
    
    function Mouseout() {
        this.classList.remove("first_new");

    };

    for (var i = 0; i < firstClass.length; i++) {
        firstClass[i].addEventListener('mouseover', Mousein);
        firstClass[i].addEventListener('mouseout', Mouseout);

    }
</script>

Answer 1

是的，你可以

方法1

document.querySelector('.first .second');

方法2

let parent = document.querySelector('.first');
parent.querySelector('.second');