html - 如何选择具有类条件的标签

Question

我想在输入集中时选择 div.second ，该怎么做？

html

<div class="first">
        <div class="first-1">
              <div class="first-1-2">
                    <input type="text" name="" id="" />
             </div>
       </div>
 </div>
 <div class="second">hello</div>

css

.first .first-1 .first-1-2 input:focus+ .second {
  background-color: green;
}

这个CSS不起作用！

标签： htmlcsssasscss-selectors

Answer 1

你可以用 JavaScript 做到这一点

const div2 = document.querySelector('.second');

const myFunction = () => {
  div2.style.backgroundColor = 'blue'
}

<div class="first">
        <div class="first-1">
              <div class="first-1-2">
                    <input type="text" name="" id="" onfocus="myFunction()" />
             </div>
       </div>
 </div>
 <div class="second">hello</div>