使用伪类更改另一个元素的属性？ [英] Changing the properties of another element using pseudo-classes?
问题描述
我看到很多人使用伪类来设计伪类的目标以外的其他元素，而使用伪类作为条件。它看起来像这样：
输入：checked + div {...}
我一直在努力寻找能够提供一些有关这个系统如何工作的洞察。我真的希望有一种方法可以在DOM树中向上移动，而不仅仅是横向和纵向。
那么我会搜索什么来找到更多信息这个主题，这个原理叫什么？
这个语法的基本用法是什么？
那么我会搜索什么来找到关于这个主题的更多信息，这个原则叫什么？
什么这个语法的基本用法是什么？
实际上，给定的选择器实际上并没有什么特别之处。然而，它确实使用了许多单独的概念来构建一个复杂的选择器，它可以做出非常漂亮的选择。
+ + 组合子表示 input 和 div 之间的相邻兄弟关系。 code>：
<！ - 无论父元素是什么，只要有一个 - >
< div>
< input type =checkboxchecked> <！ - input：checked - >
< div>< / div> <！ - div - >
< / div>
：checked 伪类指一个被检查的表单元素，在这种情况下是一个 input 元素。这个伪类是动态的，因为选择或取消选择该元素将切换伪类，但为了说明起见，我在标记中包含了选中的属性。
把它们放在一起你有输入：checked + div ，它选择任何 div 直接跟在选中的 input 元素之后。它不会选择任何其他的 div 元素，特别是它不会选择那些直接关注 unchecked input code>元素。这种技术被统称为 checkbox hack - 它是一种黑客攻击的原因是因为它经常滥用复选框控件来处理它从未打算过的用例。
定位 div 而不是输入的原因是因为 div 是选择器的主题。这总是复杂选择器中最右边的元素;任何其他通过组合器链接到它的选择器都只是用于上下文。事实上，像这样的东西可以在CSS1中称为上下文选择器 a>（尽管：checked 在CSS1中不存在），并且在最新规范的信息概述。
因此，简而言之，让这个如此聪明的原因是，您可以将动态伪类附加到选择器的任何部分，然后您可以使用一个或多个组合器将这个元素链接到一个完全不同的元素，这个元素最终会成为你的选择器的主题。
现在，答案就是：
我真的希望有一种方法可以在DOM树中向上移动，而不是横向和纵向。
不幸的是，没有一个combinator可以做到这一点你，因为combinators只存在下移（下降，孩子）和侧身（下一兄弟，跟随兄弟姐妹）。在最近的历史中，提出了一个新特性，允许您指定复杂选择器的任何部分作为该选择器的主题，从而不需要父级或前级兄弟组合器：
ul> li / *定位li * /
！ul> li / *定位ul * /
但是，工作小组。请参阅最新的CSS父项选择器，了解名为关系选择器的新提案 - 主要原因这是因为它比前面提到的主题选择器更具通用性（当然，它也消除了对新组合器的需求）。
I am seeing a lot of people using pseudo-classes to style elements other that the target of the pseudo-classes, and instead using the pseudo-class as a conditional. It looks like this:
input:checked + div{...}
I keep trying to find ANYTHING that provides some insight into how this system works. I'm really hoping that there is a way to move up in the DOM tree, and not just sideways and down.
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?
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?
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:
I'm really hoping that there is a way to move up in the DOM tree, and not just sideways and down.
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).
这篇关于使用伪类更改另一个元素的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
