问题描述
我看到很多人使用伪类来设计伪类的目标以外的其他元素，而使用伪类作为条件。它看起来像这样：
之间的相邻兄弟关系。 code>：
code>元素。这种技术被统称为 checkbox hack - 它是一种黑客攻击的原因是因为它经常滥用复选框控件来处理它从未打算过的用例。
定位 div 而不是输入的原因是因为 div 是选择器的主题。这总是复杂选择器中最右边的元素;任何其他通过组合器链接到它的选择器都只是用于上下文。事实上，像这样的东西可以在CSS1中称为上下文选择器 a>（尽管 + 和：checked 在CSS1中不存在），并且在。
因此，简而言之，让这个如此聪明的原因是，您可以将动态伪类附加到选择器的任何部分，然后您可以使用一个或多个组合器将这个元素链接到一个完全不同的元素，这个元素最终会成为你的选择器的主题。
现在，答案就是：
There is actually nothing special about the given selector as a whole. It does however make use of a number of individual concepts to build a complex selector that does something pretty nifty.
The + symbol that you see is called a "combinator"; a combinator expresses a relationship between two elements (that each have their own selectors). The + combinator for example expresses an adjacent sibling relationship between the input and the 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>The :checked pseudo-class refers to a form element that is checked, in this case an input element. This pseudo-class is dynamic, in that selecting or deselecting the element will toggle the pseudo-class, but I've included the checked attribute in the markup for the sake of illustration.
Putting them together you have input:checked + div, which selects any div that directly follows a checked input element. It will not select any other div elements, and in particular it will not select those that directly follow unchecked input elements. This technique is collectively known as the checkbox hack — the reason it's a hack is because it often abuses a checkbox control for use cases it was never intended for.
The reason that it targets the div and not the input is because div is the subject of the selector. This is always the rightmost element in a complex selector; any other selectors that are linked to it by combinators are simply there for context. In fact, something like this would be 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.
So, in short, what makes this so clever is the fact that you can attach dynamic pseudo-classes to any part of a selector, and then you can use one or more combinators to link that element to an entirely different one which will end up as the subject of your selector.
Now, the answer to this:
Is that, unfortunately, there isn't a combinator that can do this for you, since combinators only exist for moving down (descendant, child) and sideways (next-sibling, following-sibling). In recent history, a new feature was proposed that would allow you to designate any part of a complex selector as the subject of that selector, eliminating the need for a parent or preceding-sibling combinator:
ul > li /* Targets the li */ !ul > li /* Targets the ul */But that has fallen out of favor in a survey held by the working group. See Latest on CSS parent selector for a new proposal called a relational selector — the main reason for which is because it is far more versatile than even the aforementioned subject selector (and of course it also eliminates the need for new combinators).
这篇关于使用伪类更改另一个元素的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！