使用伪 类 更改另一个元素的属性？
Changing the properties of another element using pseudo-classes?
我看到很多人使用伪classes 来设置伪classes 目标以外的元素的样式，而是使用伪class作为条件。它看起来像这样：
input:checked + div{...}
我一直在努力寻找任何可以让我们深入了解这个系统如何工作的东西。我真的希望有一种方法可以在 DOM 树中向上移动，而不仅仅是横向和向下移动。
那么我应该搜索什么来找到关于这个主题的更多信息，这个原则叫什么？
这个语法的基本用法是什么？
还没有 parent 选择器。
您的代码显示的是什么时候选择了某些东西 (parent) 改变了一些东西 (child)。
这种使用 input 字段和 :checked 伪 class 的特殊方式有时被称为“复选框 hack”。
虽然您不能（当前）在 DOM 中“向上”移动 CSS select 或 select 以下非兄弟元素（相同父元素），使用复选框仍然为您提供了相当大的灵活性——因为您可以将 input 元素本身放在您想要定位的元素的前面，并使用 label 来触发更改通过单击标签的内容来改变复选框状态……并且该标签可以（几乎）放置在文档中的任何位置。 （尽管如果您想根据复选框状态更改标签本身的格式，您可能会倒霉。）
So what would I search to find more information on this subject, what is this principle called?
What is the basic usage for this syntax?
给定的 select 或作为一个整体实际上没有什么特别之处。然而，它确实利用了一些单独的概念来构建一个复杂的 select 或者做一些非常漂亮的事情。
您看到的 + 符号称为“组合符”；组合子表示两个元素之间的关系（每个元素都有自己的 select 或）。例如，+ 组合子表示 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 pseudo-class 指的是被选中的表单元素，在本例中是 input 元素。此 pseudo-class 是动态的，因为 selecting 或 deselecting 元素将切换 pseudo-class，但我已将 checked 属性包含在为说明起见的标记。
将它们放在一起得到 input:checked + div，其中 select 是直接跟在选中的 input 元素之后的任何 div。它不会 select 任何其他 div 元素，特别是它不会 select 那些直接跟在 unchecked input 元素之后的元素。这种技术统称为 checkbox hack — 它是 hack 的原因是因为它经常滥用复选框控件用于它从未打算用于的用例。
它针对 div 而不是 input 的原因是因为 div 是 [=69= 的 subject ]或者。这始终是复杂 selector 中最右边的元素；由组合器 linked 到它的任何其他 selector 都只是为了上下文。事实上，像这样的东西会是 known in CSS1 as a "contextual selector" (although + and :checked didn't exist in CSS1), and this is referenced again in the informative overview of the latest specification.
所以，简而言之，之所以如此聪明，是因为您可以将动态 pseudo-classes 附加到 selector 的 any 部分，然后您可以使用一个或多个组合器将该元素 link 变成一个完全不同的元素，该元素最终将成为 selector.
的主题
现在，这个问题的答案：
I'm really hoping that there is a way to move up in the DOM tree, and not just sideways and down.
不幸的是，没有一个组合器可以为你做这件事，因为组合器只存在于向下移动（后代，child）和横向（next-sibling，following-sibling).在最近的历史中，提出了一项新功能，允许您指定复合体的任何部分 selector 作为该 selector 的主题，从而无需 parent 或 preceding-sibling 组合子：
ul > li /* Targets the li */
!ul > li /* Targets the ul */
但这在工作组进行的一项调查中已经失宠。请参阅 以了解称为关系 selector 的新提案 — 其主要原因是因为它甚至比上述主题 selector 更通用（当然它也消除了需要新的组合器）。
我看到很多人使用伪classes 来设置伪classes 目标以外的元素的样式，而是使用伪class作为条件。它看起来像这样：
input:checked + div{...}
我一直在努力寻找任何可以让我们深入了解这个系统如何工作的东西。我真的希望有一种方法可以在 DOM 树中向上移动，而不仅仅是横向和向下移动。
那么我应该搜索什么来找到关于这个主题的更多信息，这个原则叫什么？
这个语法的基本用法是什么？
还没有 parent 选择器。
您的代码显示的是什么时候选择了某些东西 (parent) 改变了一些东西 (child)。
这种使用 input 字段和 :checked 伪 class 的特殊方式有时被称为“复选框 hack”。
虽然您不能（当前）在 DOM 中“向上”移动 CSS select 或 select 以下非兄弟元素（相同父元素），使用复选框仍然为您提供了相当大的灵活性——因为您可以将 input 元素本身放在您想要定位的元素的前面，并使用 label 来触发更改通过单击标签的内容来改变复选框状态……并且该标签可以（几乎）放置在文档中的任何位置。 （尽管如果您想根据复选框状态更改标签本身的格式，您可能会倒霉。）
So what would I search to find more information on this subject, what is this principle called?
What is the basic usage for this syntax?
给定的 select 或作为一个整体实际上没有什么特别之处。然而，它确实利用了一些单独的概念来构建一个复杂的 select 或者做一些非常漂亮的事情。
您看到的 + 符号称为“组合符”；组合子表示两个元素之间的关系（每个元素都有自己的 select 或）。例如，+ 组合子表示 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 pseudo-class 指的是被选中的表单元素，在本例中是 input 元素。此 pseudo-class 是动态的，因为 selecting 或 deselecting 元素将切换 pseudo-class，但我已将 checked 属性包含在为说明起见的标记。
将它们放在一起得到 input:checked + div，其中 select 是直接跟在选中的 input 元素之后的任何 div。它不会 select 任何其他 div 元素，特别是它不会 select 那些直接跟在 unchecked input 元素之后的元素。这种技术统称为 checkbox hack — 它是 hack 的原因是因为它经常滥用复选框控件用于它从未打算用于的用例。
它针对 div 而不是 input 的原因是因为 div 是 [=69= 的 subject ]或者。这始终是复杂 selector 中最右边的元素；由组合器 linked 到它的任何其他 selector 都只是为了上下文。事实上，像这样的东西会是 known in CSS1 as a "contextual selector" (although + and :checked didn't exist in CSS1), and this is referenced again in the informative overview of the latest specification.
所以，简而言之，之所以如此聪明，是因为您可以将动态 pseudo-classes 附加到 selector 的 any 部分，然后您可以使用一个或多个组合器将该元素 link 变成一个完全不同的元素，该元素最终将成为 selector.
的主题现在，这个问题的答案：
I'm really hoping that there is a way to move up in the DOM tree, and not just sideways and down.
不幸的是，没有一个组合器可以为你做这件事，因为组合器只存在于向下移动（后代，child）和横向（next-sibling，following-sibling).在最近的历史中，提出了一项新功能，允许您指定复合体的任何部分 selector 作为该 selector 的主题，从而无需 parent 或 preceding-sibling 组合子：
ul > li /* Targets the li */
!ul > li /* Targets the ul */
但这在工作组进行的一项调查中已经失宠。请参阅