是否有可能使CSS选择器影响页面中的其他元素没有javascript？ [英] Could it be possible to make css selector affect other elements in the page without javascript?

问题描述

例如，我想让两个文本框具有相同的风格时，无论是聚焦：

 < div class = divTxt> 
< input type =textid =aclass =a/> 
< input type =textid =bclass =b/> 
< / div> 
  

，css将是：

  .a：focus 
 {
 background-color：Blue; 
} 
 .b：focus 
 {
 background-color：Yellow; 
} 
  

我需要的是make a的背景颜色：反之亦然。
任何可能性？非常感谢。

解决方案

您可以尝试通用同级选择器（〜）如果输入框彼此相邻。

>

  .a：focus {background-color：Blue;} 
 .a：focus〜.b {background-color：Blue ;} 
 .b：focus {background-color：Yellow;} 
 .b：focus〜.a {background-color：Yellow;} 
  pre> 
 
 
注意：完全未经测试，最好在黑暗中刺穿！
 
For example, I want to make two textboxes have the same style when either is focused:
<div class="divTxt">
    <input type="text" id="a" class="a" />
    <input type="text" id="b" class="b" />
</div>
and the css would be:
.a:focus 
{
    background-color:Blue;
}
.b:focus 
{
    background-color:Yellow;
}
What I need is make a's background-color:Yellow when b is focused and vice versa.
any possibilities? Thanks a lot.
解决方案
You could try the General Sibling Selector(~) if the input boxes are next to each other.

Something like:
.a:focus {    background-color:Blue;}
.a:focus~.b {    background-color:Blue;}
.b:focus {    background-color:Yellow;}
.b:focus~.a {    background-color:Yellow;}
Note: Completely untested and a stab in the dark at best!

                        
这篇关于是否有可能使CSS选择器影响页面中的其他元素没有javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！