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; }

谢谢你

score 1 · Accepted Answer

您可以使用+（下一个兄弟选择器）或~（跟随兄弟）。1不过，我不确定这2是有效的类名。

.one:hover + .two

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

:checked + .two

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

1 回答 1