如何选择具有类条件的标签[重复]答案

【问题标题】：How to select tag with class condition [duplicate]如何选择具有类条件的标签[重复]
【发布时间】：2021-10-06 12:54:57
【问题描述】：

我想在输入有焦点时选择 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 不工作！

【问题讨论】：

这是不可能的，因为你不能在 CSS 中回溯。这只有在div.second 是input 的同级时才有效。你能得到的最近的是:focus-within，就像这样：.first:focus-within + .second { background-color: green; }

标签： html css sass css-selectors

【解决方案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>

【讨论】：