CSS通用兄弟选择器

Combinators are used to extend and enhance simple CSS selectors, making them far more powerful. I’ve introduced several combinators in previous articles:

组合器用于扩展和增强简单CSS选择器 ，使其功能更强大。 在之前的文章中，我介绍了几种组合器：

Symbol	Creates	Example
(space)	Descendant selector	blockquote p
>	Child selector	a > img
+	Adjacent sibling selector	h1 + p
*	Universal selector	div *

符号	创造	例
(空间)	后代选择器	blockquote p
>	子选择器	a > img
+	相邻兄弟选择器	h1 + p
*	通用选择器	div *

One combinator that I haven’t talked about extensively is ~ (tilde), which creates a general sibling selector.

我尚未广泛讨论的一个组合器是〜 (波浪号)，它创建了一个通用的同级选择器。

一个例子 (An Example)

Given the following markup, using content from Marcus Aurelis’ Meditations:

给定以下标记，使用Marcus Aurelis的Meditations中的内容 ：

<p>For such a purpose frees a man from trouble, and warfare, and all artifice and ostentatious display.
<h2>Book Five</h2>
<p>In the morning when you rise unwillingly, let this thought be present: I am rising to the work of a human being.
<div>
	<p>Why then am I dissatisfied if I am going to do the things for which I exist and for which I was brought into the world?
</div>
<p>Or have I been made for this, to lie in the bed-clothes and keep myself warm?

We could apply this CSS:

我们可以应用以下CSS：

h2 ~ p {
	font-style: italic;
}

Which produces:

产生：

For such a purpose frees a man from trouble, and warfare, and all artifice and ostentatious display.

为此目的，使一个人摆脱了麻烦，战争和一切诡计和炫耀的展示。

书五 (Book Five)

In the morning when you rise unwillingly, let this thought be present: I am rising to the work of a human being.

早晨，当您不愿升起时，请让这个想法出现：我正在升起人类的工作。

Why then am I dissatisfied if I am going to do the things for which I exist and for which I was brought into the world?

如果我要为自己存在的事物和被带入世间的事物做事，我为什么不满意呢？

Or have I been made for this, to lie in the bed-clothes and keep myself warm?

还是我为此而躺在床上，让自己保持温暖？

The general sibling selector affects elements after the leading element, but which are at the same level: note that the paragraph inside the <div> remains unaffected, but the paragraph after it is italicized.

通用的同级选择器会影响前导元素之后的元素，但它们处于同一级别：请注意， <div>内的段落保持不受影响，但其后的段落用斜体表示。

This feature allows sibling selectors to be used in interesting ways, “leaping” over elements to affect others.

此功能允许同级选择器以有趣的方式使用，“游移”元素以影响其他元素。

For example, let’s take the following:

例如，让我们进行以下操作：

<a href="#">Three little maids</a>
<hr />
<div>
	<p>From school are we…
</div>

Say we want a hover on the link to affect the content of the div. We can’t use an adjacent selector, as the link isn’t directly next to the div. We could “chain” a series of adjacent selectors to account for the horizontal rule, but that would be horribly long, ugly, and inefficient. Instead, we’ll use a sibling selector:

假设我们要在链接上悬停以影响div的内容。 我们不能使用相邻的选择器 ，因为链接不是直接在div旁边。 我们可以“链接”一系列相邻的选择器以解决水平规则 ，但这将是非常长，丑陋且效率低下的。 相反，我们将使用同级选择器：

a:hover ~ div {
	color: red;
}

That works perfectly, as you can see by hovering over the link below:

将鼠标悬停在下面的链接上可以看到，效果非常好：

Three little maids 三个小佣人

---

---

From school are we…

我们是学校...

A good example of more complex child selectors with other combinators can be found in my CSS-driven Visual Database.

在我的CSS驱动的Visual Database中可以找到带有其他组合器的更复杂的子选择器的一个很好的例子。

The important thing to remember about sibling selectors is that they must start at the same level as the elements they are affecting: if the link above was buried inside another element, we couldn’t “work our way out” of it to affect other elements.

关于同级选择器要记住的重要一点是，它们必须与受影响的元素在同一级别开始 ：如果上面的链接被埋在另一个元素中，我们将无法“摆脱”影响其他元素。

在地平线上：CSS父选择器 (On The Horizon: The CSS Parent Selector)

Currently CSS selectors can’t go “backwards”: that is, they can’t work from a child element to a parent. For example, it would be great if we could use CSS to affect only links that contained images.

当前，CSS选择器不能“向后”移动：也就是说，它们不能从子元素到父元素。 例如，如果我们可以使用CSS 仅影响包含图像的链接，那就太好了。

It’s been proposed as several different kinds of combinator, but in the current CSS draft the ability to select relational elements is a pseudo-class:

它被提议为几种不同的组合器，但是在当前CSS草案中，选择关系元素的能力是伪类：

a:has(> img) {
	border: 2px solid red;
}

… which would apply a border only on links that contain images. Note that this is a reversal of the usual rule that the last element in a selection is the thing that’s changed.

…仅在包含图像的链接上应用边框。 请注意，这与通常规则相反，后者是选择中的最后一个元素是已更改的东西。

No browser on the planet yet supports the CSS relational selector: not even the beta browsers like Chrome Canary or Firefox Aurora. It remains a tantalizing possibility, and one that brings some serious performance challenges for future browsers.

地球上还没有浏览器支持CSS关系选择器 ：甚至Chrome Beta Canary或Firefox Aurora等Beta浏览器也不支持 。 这仍然是一种诱人的可能性，并且给未来的浏览器带来了一些严重的性能挑战。

Right now, the only way you can select parent elements is via JavaScript: element.parentNode or (in JQuery) element.parent() or .has())

现在，选择父元素的唯一方法是通过JavaScript ： element.parentNode或(在JQuery中) element.parent()或.has() )

翻译自: https://thenewcode.com/900/The-CSS-General-Sibling-Selector