聚焦时的 CSS 类答案

【问题标题】：CSS class when focused聚焦时的 CSS 类
【发布时间】：2023-03-30 03:23:02
【问题描述】：

我有一个名为.color-blue 和color:blue !important 的类。我有一个类inputContent，有一个输入和一个div，像这样：

<div class="inputContent">
   <input>
   <div class="icon color-blue" style="color:red !important;">TEST</div>
</div>

并且我希望以输入为重点，.icon 成为类的颜色，而不将 color:blue !important 放在 inputContent 或其他中。

我已经测试过了

.inputContent input:focus ~ .icon {
   color:inherit;
}

但什么都没有。

【问题讨论】：

在您的情况下，内联样式中的 !important 将始终覆盖外部 css 中的 !important。

标签： css focus

【解决方案1】：

你可以用jquery做到这一点：

$("input").focus(function(){
    $(".icon").attr("style", "color:blue");
});

【讨论】：

我想我找到了一些东西。从图标 div 中删除内联样式并使用 + 号创建此条件。 .icon{ 颜色：红色；} 输入：焦点 + .icon{ 颜色：蓝色； }
不完全是。我写了正确的代码一个答案。
请看我的回答
你有一些问题。看我的回答。你必须删除 .color-blue 类。相反，在 .icon 类上将默认颜色设置为红色。之后将样式添加到“input:focus + .icon”。
是的，但我有特定的颜色（为什么我使用类，这更容易），我使用 color-lightred 等

【解决方案2】：

试试这个：

 <style>
  .icon{
       color: red;}
       input:focus + .icon{
       color: blue;
      }
</style>  
<div class="inputContent">
<input>
<div class="icon">TEST</div>
</div>

【讨论】：

请看我的回答

【解决方案3】：

我只想“删除”或“取消”style="color:red !important;" 的颜色，并用 color-blue 类替换颜色，而不添加像 color:blue; 这样的行

【讨论】：