更改单独的元素样式以关注其他元素[重复]答案

【问题标题】：change separate element style on focus on other element [duplicate]更改单独的元素样式以关注其他元素[重复]
【发布时间】：2020-12-20 10:25:48
【问题描述】：

如何让它发挥作用？ HTML

#nav input[type=text]:focus ~ #two {
   color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
</div>
<div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

我认为问题出在单独的 div 元素上。

【问题讨论】：

标签： html css

【解决方案1】：

你不能。只有当元素是:focus 的兄弟或子元素时才有可能。

要么使用 Javascript，要么将 div 放在导航中（如果您无法更改 DOM 树，这可能不是您想要的）。

#nav input[type=text]:focus~#two {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
  <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

纯Javascript：

var navbar = document.getElementById('nav')

navbar.addEventListener('focusin', toggleClass);
navbar.addEventListener('focusout', toggleClass);

function toggleClass() {
  document.querySelector('.two').classList.toggle('redColor');
}

.redColor {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
</div>
<div class="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

【讨论】：

那么如何让它工作，有什么变化？
这是一篇相关文章，解释了子选择器和同级选择器，抱怨 OP 需要缺少的功能，并演示了一些解决此问题的 jQuery 模式：css-tricks.com/child-and-sibling-selectors
@Lessey 通过更改您的 dom 或使用 js/jquery。我给了你两个解决方案，和一个纯 Js 解决方案。
我尝试了纯js的方式，但没有奏效。 @IslamElshobokshy
@Lessey 它确实有效jsfiddle.net/nk3tcrhb

【解决方案2】：

#nav:focus-within ~ #two {
  color: red;
}

<div id="nav">
  <input type="text" placeholder="Search" name="search" />
</div>
<div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

您可以使用:focus-within 选择器实现此目的

【讨论】：

这是错误的jsfiddle.net/tp9m76vn，使用这个，如果nav 包含多个元素，那么焦点将发生在所有元素上。
不，它不是......显然它有效
@Paulie_D 正如我所说，如果导航包含多个元素，则将使用所有元素。不是特别是 OP 要求的 input[type=text]。
@Paulie_D 看到他是如何特别要求 input[type=text] 的，假设他只想要那些。
这项工作如果我们有一个元素但我特别要求@IslamElshobokshy 所说的input[type=text] 元素还有其他方法吗？

【解决方案3】：

Css不能像jquery那样解析Dom树，所以不能解析父元素。

~ 运算符仅在您的元素存在于相同深度时才有效。

<div id=nav>
    <input type="text" placeholder="Search" name="search">
    <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

【讨论】：

那么如何让它工作呢？
@VickyP，您的 id 是错误的，因为在问题中它也丢失了，id="nav"