影响与最初选择的元素无关的元素

Question

我有以下代码：

<EmailAddresses count="2">
    <string>Allen.Patterson01@fantasyisland.com</string>
    <string>Allen.Patterson12@fantasyisland.com</string>
</EmailAddresses>

和CSS：

<input id="checkboxWithGeneralSiblingSelector" type="checkbox"/>
<span id="span1">Text</span>
<br/><br/>
<input id="checkboxWithoutGeneralSiblingSelector" type="checkbox"/>
<span id="span2">Text2</span>

第一个工作正常，它查看它的一般兄弟并获取ID为#checkboxWithGeneralSiblingSelector:checked ~ #span1 { font-weight: bold; } #checkboxWithoutGeneralSiblingSelector:checked #span2 { font-weight: bold; } 的元素，所以我假设第二个会查看整个DOM并给我一个id为{{1}的元素}。但后来我意识到，没有运算符实际上是“后代”运算符，也就是它在最初选择的运算符中查找span元素。

JSFiddle

这个小提琴过于简单，在我的情况下，跨度与复选框无关，也就是说无法选择span2，span2或+

编辑：我的DOM的简化示例：

>

当效果需要以最初选定项目的状态为条件时，如何影响与当前项目没有特定DOM关系的项目？

Answer 1

您可以等待：有伪类，然后执行类似this fiddle的操作（今天，2016年4月，它不能在任何浏览器中运行）

.sibiling:has(input:checked)  ~  #toBeAffected {
    font-weight: bold;
}

这是一个有用的链接：

https://stackoverflow.com/a/1014958/2594354