两个复选框控制webkit样式时仅第二个生效的问题求助

这个问题我之前调试类似功能时也碰到过，核心原因出在你用的CSS相邻兄弟选择器+上！

问题根源 #

先看你原来的CSS选择器：

input#lightswitch:checked + .main > .video-container { -webkit-filter: invert(1); }
input#direction:checked + .main > .video-container { -webkit-transform: scal... }

+是相邻兄弟选择器，它要求目标元素（.main）必须是当前复选框的紧挨着的下一个兄弟元素才会生效。假设你的HTML结构是这样的：

<input type="checkbox" id="lightswitch">
<input type="checkbox" id="direction">
<div class="main">
  <div class="video-container">...</div>
</div>

此时第一个复选框#lightswitch的下一个兄弟是#direction，而不是.main，所以第一个选择器根本匹配不到目标元素，自然失效；而第二个复选框#direction的下一个兄弟正好是.main，所以它的功能正常。

解决方案：改用通用兄弟选择器~ #

把CSS里的+替换成~（通用兄弟选择器），它会匹配当前元素后面所有的兄弟元素，不管是否紧挨着。修改后的CSS如下：

/* 反转颜色的样式 */
input#lightswitch:checked ~ .main > .video-container {
  -webkit-filter: invert(1);
  filter: invert(1); /* 加上标准写法兼容更多浏览器 */
}

/* 切换摄像头方向的样式 */
input#direction:checked ~ .main > .video-container {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1); /* 加上标准写法 */
}

这样不管两个复选框的顺序如何，只要它们在.main元素的前面，勾选时对应的样式都会正确应用到.video-container上，而且两个样式可以同时生效（filter和transform是不同的CSS属性，不会互相覆盖）。

额外提示 #

如果你的HTML结构允许，也可以把两个复选框放在同一个父容器里，然后通过父容器的状态来控制样式，但用~的方法是最直接且不需要调整HTML结构的方案。

内容的提问来源于stack exchange，提问作者Tariq