html - 在 CSS 中的 "checkmark:checked"条件之前选择一个 div

Question

好的，我正在使用纯 CSS 制作响应式导航(使用教程)。它的工作方式是，当您查看响应式(压缩)菜单时，“菜单”按钮有一个分配给它的隐藏复选框输入。选中复选框后，导航 ul#menu(设置为显示:无；在移动 View 中)设置为显示: block ，如下所示:

input[type=checkbox]:checked ~ #menu {display:block;}

我还有一个带有箭头图标的跨度，用于带有子菜单的菜单项，当您将鼠标悬停在带有子菜单的 li 上时，它会旋转指向下方。

<li class="dropdown"><a href="#">Link with Submenu</a><span class="arrow">></span></li>
.dropdown:hover .nav-arrow {transform:rotate(90deg);}

标准的东西。

我不喜欢在移动 View 中显示子菜单的“悬停”属性，所以我也将它们转换为复选框。因此，点击 li 元素将触发它们自己的复选框以显示其下方的子菜单 ul。

input[type=checkbox]#show-menu:checked ~ .sub-nav {display:block;}

我现在似乎无法弄清楚的问题是如何在您点击(选中)子菜单链接时让子菜单箭头向下旋转。

我尝试使用箭头将输入移动到 li 的上方和下方(分别使用 checkbox:checked + .nav-arrow 和 checkbox:checked ~ .nav-arrow)，但似乎没有任何效果。

有没有人知道如何在选中复选框后使用箭头适本地选择跨度？欣赏它!

顺便说一句，我不是 JavaScript/jQuery 专家，这样做的目的是避免使用它，所以任何否定这些语言的解决方案都是首选。 :)

编辑:这是我确切的 html/cs 设置的 js fiddle: http://jsfiddle.net/nL3cd9mg/

感谢您到目前为止的回复，希望 fiddle 对您有所帮助。 :P

Answer 1

啊!我终于明白了。我一如既往地忽略了简单的解决方案。我只是对我的选择器变得更加具体:

input[type=checkbox]#show-cl-menu:checked ~ .show-cl-menu .nav-arrow {

代替旧的

input[type=checkbox]#show-cl-menu:checked ~ .nav-arrow {

感谢大家的参与!