Question

我有一个看似愚蠢的问题！

我只想要一个带打开相机的div和两个复选框，一个用于反转颜色，一个用于切换摄像机方向，但是当我有两个复选框输入时，只有第二个有效，第一个用于＆＃ 39;但是，如果我保持它们中的任何一个，它就有效。我怎么解决这个问题？感谢

＆＃13;

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

＆＃13;

<input type="checkbox" id="lightswitch" />
<input type="checkbox" id="direction" />

<div class="main">
  <h2>Lights</h2>
  <div class="features">
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
   <p class="last">Lorem ipsum</p>
  </div>
  <div class="video-container">
   <video id="v" class="video-container"></video>
  </div>
</div>

＆＃13;

Answer 1

这是因为您为+元素使用相邻兄弟组合或input，而您应该使用通用兄弟组合子或~表示第一个（#lightswitch），或者更好地在两者上使用它（如果碰巧其他一些元素出现在.main div之前）。

它们之间的区别在于+仅选择在之后<=>>使用该选择器的元素，而~表示该元素。＃39;不是这样，可以是任意数量的其他兄弟元素，它仍然会选择它。这就是#direction输入元素工作正常的原因，但#lightswitch没有。

＆＃13;

#lightswitch:checked ~ .main > .video-container {
  -webkit-filter: invert(1);
  color: #0f0; /* inverts the color to #f0f when checked */
}

#direction:checked ~ .main > .video-container { /* recommended, but can also leave the + selector if you don't plan to add any elements before the .main div */
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

＆＃13;

<input type="checkbox" id="lightswitch">
<input type="checkbox" id="direction">

<div class="main">
  <h2>Lights</h2>
  <div class="features">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p class="last">Lorem ipsum</p>
  </div>
  <div class="video-container">
    test
    <video id="v" class="video-container"></video>
  </div>
</div>

＆＃13;

webkit-transform在两个不同的复选框中添加时不起作用

1 个答案: