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

Posted 2023-03-06

【中文标题】更改单独的元素样式以关注其他元素[重复]

【英文标题】：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 元素上。

【参考方案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"