使用伪选择器更改另一个元素的属性？ [英] Changing the properties of another element using pseudo selectors?

问题描述

我看到很多人使用伪选择器来样式元素，而不是伪选择器的目标，而是使用伪选择器作为条件。它看起来像这样：

I am seeing a lot of people using pseudo selectors to style elements other that the target of the pseudo selector, and instead using the pseudo selector as a conditional. It looks like this:

input:checked + div{...}

我一直试图找到任何提供一些洞察如何这个系统的工作原理。我真的希望有一种方法在DOM树中向上移动，而不是向侧边和向下移动。

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>

：checked 伪类伪选择器）指的是检查的表单元素，在这种情况下是输入元素。这个伪类是动态的，因为选择或取消选择元素将切换伪类，但为了说明的目的，我已经在标记中包括了 checked 属性。

The :checked pseudo-class (not "pseudo selector") 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.

将它们组合在一起，您可以输入 input：checked + div 直接跟随在检查的输入元素。它不会选择任何其他 div 元素，特别是它不会选择那些直接跟随未选中 input 元素。

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.

它的目标是 div ，而不是 input 是因为 div 是选择器的主题。这总是复杂选择器中最右边的元素;通过组合器链接到它的任何其它选择器仅仅在于上下文。事实上，类似这样的东西会在CSS1中被称为上下文选择器的 （虽然在CSS1中不存在 + 和：checked ）， =http://www.w3.org/TR/css3-selectors/#selectors =nofollow>最新规范的信息概述。

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.

现在，回答这个：

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

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 the accepted answer to this question 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屋！