html - 如何使用 css 更改非嵌套元素属性？

Question

是否可以在没有 javascript 的情况下使用 css 做这样的事情？ 假设我必须将未嵌套的 div。我想在单击另一个时更改一个的属性。

例如:

<div class="1"> first div </div>
<div class="2"> second div </div>

我希望当我点击 div 1 时出现第二个 div 或者它的字体颜色更改为另一种颜色。

我已经测试了这段代码，但它在嵌套 div 时有效:

.1:hover .2{ font-size:16px; }

谢谢

Answer 1

您可以使用+(下一个同级选择器)或~(下一个同级选择器)。不过，我不确定 1 和 2 是有效的类名。

.one:hover + .two

http://jsfiddle.net/5Unjh/

这也与点击没有直接关系，只是悬停。对于仅使用可切换输入的 CSS/HTML 单击非语义解决方案是可能的。

:checked + .two

<label for=check> first div </label><input hidden type=checkbox id=check>
<div class=two>second div</div>