是否可以使 css 选择器在没有 javascript 的情况下影响页面中的其他元素？ [复制]答案

【问题标题】：Could it be possible to make css selector affect other elements in the page without javascript? [duplicate]是否可以使 css 选择器在没有 javascript 的情况下影响页面中的其他元素？ [复制]
【发布时间】：2009-12-01 04:37:01
【问题描述】：

例如，我想让两个文本框在其中一个被聚焦时具有相同的样式：

<div class="divTxt">
    <input type="text" id="a" class="a" />
    <input type="text" id="b" class="b" />
</div>

css 是：

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

我需要的是使 a 的背景颜色：当 b 聚焦时为黄色，反之亦然。任何可能性？非常感谢。

【问题讨论】：

我认为没有 Javascript 是可行的——无论如何，用 Javascript 做这件事有什么问题？
适用于禁用 javascript 的浏览器。 :)

标签： css focus css-selectors

【解决方案1】：

如果输入框彼此相邻，您可以尝试General Sibling Selector(~)。

类似：

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

注意：完全未经测试，充其量只是在黑暗中刺伤！

【讨论】：

好点+1。可惜这在旧浏览器中没有很好地实现。
更不用说 IE7 中的 bug，链接的文章提到了它的兼容性问题。
谢谢，但是老版本的浏览器不使用这个了……而且还是有很多人在使用老版本的。
将 .a:focus~b 更改为 .a:focus~.b... 当 b 聚焦时，这不起作用。总之非常感谢。 =)
@Jronny，由于这些限制，我认为您可能会被卡住。如果能找到解决方案，他们一定会得到我的投票！

【解决方案2】：

如果他们禁用了 javascript，他们可能不会注意到文本框样式。

【讨论】：

好吧，反正他们禁用了 javascript 是他们的错。他们不会注意到我创作的美丽。 邪恶的笑声

【解决方案3】：

.chk1:focus{
   background-color:Blue;
}
.chk2:focus{
   background-color:Yellow;
}

文本字段

<input class=chk1 type=text id="a">
<input class=chk2 type=text id="b">

这个可以在 FireFox 上正常工作，但在 IE6 上可能会出现问题见CSS Issue Focus For IE6

如果你想让它在 IE 上工作，你可能想使用 javascript！！

希望对你有帮助

RDJ

【讨论】：