我看到很多人使用伪类来设置伪类目标以外的元素的样式，而是使用伪类作为条件。它看起来像这样：
input:checked + div{...}
我一直在努力寻找任何可以深入了解该系统如何工作的东西。我真的希望有一种方法可以在 DOM 树中向上移动，而不仅仅是横向和向下移动。
那么我应该搜索什么来找到关于这个主题的更多信息，这个原则叫什么？
这个语法的基本用法是什么？
【问题讨论】：
标签： html css css-selectors
那么我会搜索什么来找到关于这个主题的更多信息，这个原则叫什么？
这个语法的基本用法是什么？
整个给定的选择器实际上并没有什么特别之处。然而，它确实利用了许多单独的概念来构建一个复杂的选择器，它可以做一些非常漂亮的事情。
您看到的+ 符号称为“组合子”；组合器表示两个元素之间的关系（每个元素都有自己的选择器）。例如+ 组合子表示input 和div 之间的相邻兄弟关系：
<!-- Doesn't matter what the parent element is, as long as there is one -->
<div>
<input type="checkbox" checked> <!-- input:checked -->
<div></div> <!-- div -->
</div>
:checked 伪类是指被检查的表单元素，在本例中是 input 元素。这个伪类是动态的，选择或取消选择元素会切换伪类，但为了便于说明，我在标记中包含了checked 属性。
将它们放在一起你就有input:checked + div，它选择任何直接跟在选中的input 元素之后的div。它不会选择任何其他div 元素，特别是它不会选择直接跟随unchecked input 元素的那些。这种技术统称为checkbox hack——之所以成为hack，是因为它经常滥用复选框控件来处理它从未打算用于的用例。
它针对div 而不是input 的原因是因为div 是选择器的主题。这始终是复杂选择器中最右边的元素；通过组合器链接到它的任何其他选择器只是用于上下文。事实上，像这样的东西是known in CSS1 as a "contextual selector"（虽然+和:checked在CSS1中不存在），这在the informative overview of the latest specification中再次被引用。
所以，简而言之，它如此聪明的原因在于您可以将动态伪类附加到选择器的任何部分，然后您可以使用一个或多个组合器来链接它元素到一个完全不同的元素，最终将成为选择器的主题。
现在，这个问题的答案：
我真的希望有一种方法可以在 DOM 树中向上移动，而不仅仅是横向和向下移动。
不幸的是，没有组合器可以为您执行此操作，因为组合器仅存在于向下移动（后代、子代）和横向移动（下一个兄弟姐妹、跟随兄弟姐妹）。在最近的历史中，提出了一项新功能，它允许您将复杂选择器的任何部分指定为该选择器的主题，从而无需父或前兄弟组合器：
ul > li /* Targets the li */
!ul > li /* Targets the ul */
但这在工作组进行的一项调查中已经失宠。请参阅 Latest on CSS parent selector 以获取称为关系选择器的新提案——主要原因是因为它比上述主题选择器更加通用（当然它也消除了对新组合器的需求）。
【讨论】：
这种使用input 字段和:checked 伪类的特殊方式有时被称为“checkbox hack”。
虽然您（目前）不能使用 CSS 选择器在 DOM 中“向上”移动或选择以下非兄弟元素（相同的父元素），但使用复选框仍然为您提供了相当多的灵活性——因为您可以将 @ 987654323@ 元素本身就在您要定位的元素前面，并使用label 通过单击标签的内容来触发复选框状态的更改……并且该标签可以（几乎）放置在任何地方在您的文档中。 （虽然如果您想根据复选框状态更改标签本身的格式，但您可能不走运。）
【讨论】：
还没有父选择器。
您的代码显示是什么时候被选中（父级）更改某些东西（子）。
【讨论】：