如何通过Javascript定位此兄弟CSS

Question

如何通过Javascript定位，原始HTML将具有额外的.checkmark-disabled类，如欲望输出。

原始HTML 1

<div>
<input type="checkbox" disabled>
<span class="checkmark">
</div>

原始HTML 2

<div>
<input type="checkbox">
<span class="checkmark">
</div>

期望输出

<div>
<input type="checkbox" disabled>
<span class="checkmark checkmark-disabled">
</div>

意味着这只是目标禁用输入，然后添加.checkmark-disabled来覆盖类。

其他信息：我需要定位同级CSS，而不是整个div。

Answer 1

您应该考虑使用:disabled和input + .checkmark {} input:checked + .checkmark {} input:disabled + .checkmark {} input:checked:disabled + .checkmark {} 伪选择器及其组合将样式应用于CSS的同级元素：

:not()

请注意，使用这种方法，您将需要覆盖应用于基本选择器的样式（这完全可以，但是您可能会感到困惑）。要应用不同的样式而不进行覆盖，可以使用input:not(:checked) + .checkmark {} 伪选择器，如下所示：

input[disabled] + .checkmark {}

对于IE8及以下版本，您可以使用以下语法：

Press Enter to start Julia.

More information on pseudo-class selectors

Answer 2

请参阅W3School，以查找要定位的方案。如果您是在目标元素之后引用同级元素，则可以在CSS中使用+符号。

input + span表示选择所有<span>元素之后紧跟的所有<input>元素

要使其更先进，可以根据input状态更改同级样式，可以在:checked CSS中添加:disabled或input + span。

input:disabled + span表示选择紧接<span>元素之后的所有<input disabled>元素。

有更多的方法可以选择CSS，但是最好参考W3School。

如果您想使用javascript或jquery来执行DOM，则必须更加具体，并提供正在使用但无法正常工作的代码。