Question

我看到很多人使用伪类来设置伪类的目标之外的元素，而是使用伪类作为条件。它看起来像这样：

input:checked + div{...}

我一直在努力寻找能够深入了解该系统如何运作的任何内容。我真的希望有一种方法可以在DOM树中向上移动，而不仅仅是横向和向下移动。

那么我会搜索什么来找到关于这个主题的更多信息，这个原则叫做什么？

此语法的基本用法是什么？

Answer 1

那么我会搜索什么来找到关于这个主题的更多信息，这个原则叫做什么？

此语法的基本用法是什么？

整个给定的选择器实际上并没有什么特别之处。然而，它确实利用了许多单独的概念来构建一个非常漂亮的复杂选择器。

您看到的+符号称为＆＃34;组合符＆＃34 ;;组合子表示两个元素之间的关系（每个元素都有自己的选择器）。例如+组合子表示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，它会选择直接跟在已检查的div元素之后的任何input。它不会选择任何其他div元素，特别是它不会选择那些直接跟随未经检查的 input元素的元素。这项技术统称为复选框黑客 - 它之所以被黑客攻击是因为它经常滥用复选框控件来控制它从未用过的用例。

它定位div而不是input的原因是因为div是选择器的主题。这始终是复杂选择器中最右边的元素;通过组合器链接到它的任何其他选择器只是用于上下文。事实上，类似的内容是known in CSS1 as a "contextual selector"（尽管CSS1中不存在+和:checked），这在the informative overview of the latest specification中再次引用。

因此，简而言之，这使得如此聪明的事实是你可以将动态伪类附加到选择器的任何部分，然后你可以使用一个或多个组合器来链接元素到一个完全不同的元素，它将最终成为你的选择器的主题。

现在，答案是：

我真的希望有一种方法可以在DOM树中向上移动，而不仅仅是横向和向下移动。

不幸的是，没有一个组合器可以为你做这个，因为组合器只存在向下移动（后代，子）和侧向（下一个兄弟，跟随兄弟）。在最近的历史中，提出了一个新功能，允许您将复杂选择器的任何部分指定为该选择器的主题，从而无需父级或前级兄弟组合器：

ul > li  /* Targets the li */
!ul > li /* Targets the ul */

但在工作组的一项调查中，这已经失宠了。有关称为关系选择器的新提议，请参阅Latest on CSS parent selector - 其主要原因是因为它比上述主题选择器更具通用性（当然它也消除了对新组合器的需求）。

Answer 2

还没有父选择器。
您编码的内容是选择某些内容（父级）更改某些内容（子级）时。

Answer 3

这种使用input字段和:checked伪类的特殊方式有时被称为“复选框黑客”。

虽然您不能（当前）使用CSS选择器在DOM中“向上”移动或选择以下不是兄弟元素的元素（相同的父元素），但使用复选框仍然提供了相当大的灵活性 - 因为您可以放置{ {1}}元素本身就在您要定位的元素的正前方，并使用input通过单击标签的内容触发更改复选框状态...并且可以放置该标签（几乎）文档中的任何位置。（虽然如果您想根据复选框状态更改标签本身的格式，可能会运气不好。）

使用伪类更改另一个元素的属性？

3 个答案: