AtoZ CSS截屏视频：常规兄弟选择器

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

General sibling is a little known but very useful CSS selector.

通用兄弟姐妹是一个鲜为人知但非常有用CSS选择器。

It allows the styling of an element that is a sibling of another.

它允许样式化另一个样式的元素。

We’ll look at the syntax, a practical example and then a quick round up of the other child and sibling selectors in CSS.

我们将研究语法，一个实际示例，然后快速汇总CSS中的其他子级和同级选择器。

句法 (Syntax)

The general sibling selector is part of the family of combinator selectors in CSS and is identified with the tilde ~ character. It looks a bit like this:

常规的同级选择器是CSS 组合器选择器系列的一部分，并用代字号~字符标识。 它看起来像这样：

h2 ~ p {
  color: red;
}

This selector will style any paragraphs that are siblings of a second-level heading and occur after the <h2>.

此选择器将设置任何样式作为第二级标题的同级并且出现在<h2>之后的段落。

The benefit of this selector is that the paragraphs don’t have to be adjacent siblings of the <h2>.

该选择器的好处在于，段落不必与<h2> 相邻 。

<article> 
  <h1>Lorem ipsum</h1> 
  <p>Dolor sit amet</p> 
  <h2>Lorem ipsum</h2> 
  <p>Dolor sit amet</p> 
  <h3>Lorem ipsum</h3> 
  <p>Dolor sit amet</p>
</article>

In this code snippet, both the paragraphs after the <h2> will be red, but the first one will not as it doesn’t come after a <h2> in the document.

在此代码段中， <h2>之后的两个段落都将显示为红色，但第一个段落不会显示为红色，因为它不在文档中的<h2>之后。

This can be a little confusing as all the paragraphs could be said to be “general siblings” of each other but the selector would not match the first one. This could be the reason that this selector has been renamed in the CSS Selectors Level 4 spec to the “following sibling” selector.

这可能有点令人困惑，因为所有段落都可以说是彼此的“一般同级兄弟”，但选择器将与第一个不匹配。 这可能是在CSS选择器第4级规范中将该选择器重命名为“后续兄弟”选择器的原因。

<h2>Lorem ipsum</h1> 
<div>
  <p>Dolor sit amet</p> 
</div>

In this case, even though the paragraph comes after the <h2>, the paragraph and <h2> aren’t siblings so our selector won’t match anything here.

在这种情况下，即使该段落在<h2> ，该段落和<h2>也不是兄弟姐妹，因此我们的选择器在此处不会匹配任何内容。

实际例子 (Practical Example)

Let’s have a look at a practical example.

让我们看一个实际的例子。

The Summary and Transcript accordions below use the general sibling selector to determine the open/closed state of each section. This whole behavior is purely handled in CSS; there’s no Javascript here!

下面的“摘要”和“抄本”手风琴使用通用的同级选择器来确定每个部分的打开/关闭状态。 整个行为完全在CSS中处理； 这里没有Java语言！

See the Pen GjpzGq by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint( @SitePoint )提供的Pen GjpzGq 。

The markup for the titles of each section has a hidden <input>, a <h1> with a <label> inside of it, followed by a <div> to contain the accordion content.

每个部分标题的标记都有一个隐藏的<input> ，一个<h1> <label>里面带有一个<label> ，后跟一个<div>来包含手风琴内容。

Clicking on the label, switches the :checked state of the input and then the general sibling selector allows the styling of the .accordion-content.

单击标签，切换输入的:checked状态，然后通用的同级选择器允许设置.accordion-content的样式。

When the input is not checked, the max-height of the accordion is set to zero. When the input is checked, the max-height is set to an unlikely large value – 10000px in this case. Applying a bit of transition gives a smooth sliding animation.

如果未检查输入，则手风琴的max-height设置为零。 选中输入后， max-height将设置为一个不太大的值-在这种情况下为10000px。 应用一些过渡效果可以使滑动动画流畅。

input ~ .episode-accordion {
  max-height: 0;
}
input:checked ~ .episode-accordion {
  max-height: 10000px;
}
.episode-accordion {
  -webkit-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
}

其他儿童和兄弟姐妹选择器 (Other Child & Sibling Selectors)

As this was a rather short episode, let’s take a look at some of the other combinator selectors available in CSS. These are supported since IE7 which should have the vast majority of use-cases well and truly covered.

由于这只是一小段情节，因此让我们看一下CSS中其他可用的组合器选择器。 自IE7以来，所有这些都得到了支持，而IE7应该很好地覆盖了绝大多数用例。

后代选择器 (Descendent Selector)

The descendent selector has been around since forever and selects elements matching the second selector while they have the first selector as an ancestor.

后代选择器从此一直存在，并选择与第二个选择器匹配的元素，而它们将第一个选择器作为祖先。

div p { 
  color: red;
}

This selector will make all paragraphs in any child element of any <div> red.

该选择器会将所有<div>任何子元素中的所有段落<div>红色。

孙子选择器 (Grandchild Selector)

The Grandchild selector is similar to the descendent selector but selects elements that match the second selector if they are descendants of any child element of the first selector. It uses the asterisk character, but it’s important to note that this is not the same as the wildcard or universal “star” selector.

孙子选择器类似于后代选择器，但是如果它们是第一个选择器的任何子元素的后代，则选择与第二个选择器匹配的元素。 它使用星号字符，但必须注意，这与通配符或通用“星号”选择器不同。

div * p { 
  color: red;
}

This selector will make all paragraphs in children of a <div> red.

该选择器会将所有段落的<div>红色。

儿童选择器 (Child Selector)

The child selector, signified by the greater than sign, selects elements matching the second selector that are a direct child of elements matching the first selector.

子选择器(由大于号表示)选择与第二个选择器匹配的元素，这些元素是与第一个选择器匹配的元素的直接子元素。

div > p { 
  color: red;
}

This selector will make all paragraphs that are children of a <div> red.

此选择器会将所有<div>子级的段落<div>红色。

相邻兄弟姐妹 (Adjacent Sibling)

The adjacent sibling selector is similar to general sibling selector and is signified with the + character. This selector will style elements matching the second selector as long as they appear immediately after an element matching the first selector.

相邻的同级选择器与常规同级选择器相似，并用+字符表示。 该选择器将为与第二个选择器匹配的元素设置样式，只要它们在与第一个选择器匹配的元素之后立即出现。

div + p { 
  color: red;
}

This selector will make any paragraphs that directly follow a <div> red.

该选择器将使直接在<div>所有段落<div>红色。

As I mentioned previously, all these selectors are available in IE7+ so you can (almost certainly) use them right now. Hopefully, they’ll come in handy for your next project.

如前所述，所有这些选择器都可以在IE7 +中使用，因此您(几乎可以肯定)可以立即使用它们。 希望他们会在您的下一个项目中派上用场。

In the above video covering the letter G, we looked at the General Sibling selector which allows styling of a sibling element. There’s also the other child and sibling selectors for traversing down/across an element tree.

在上面覆盖字母G的视频中，我们介绍了允许同级元素样式化的General Sibling选择器。 还有其他子级和同级选择器，用于遍历/跨越元素树。

But what about parent selectors? Well, despite the multiple use-cases of needing to select a parent element based on whether it contains certain children, this feature is not currently available in CSS.

但是父选择器呢？ 嗯，尽管有多个用例需要根据其是否包含某些子元素来选择父元素，但是CSS中当前不提供此功能。

But the good news is that they’ve made it into the CSS Selectors Level 4 spec. Woo Hoo! The parent selector, or the subject of the selector as it’s also called, allows you to select a parent element for styling. The latest draft of the spec uses an exclamation mark after the given selector to set the subject element.

但是好消息是他们已经进入了CSS Selectors Level 4规范。 呜呼！ 父选择器或选择器的主题 (也称为选择器)允许您选择要设计样式的父元素。 规范的最新草案在给定选择器之后使用感叹号设置主题元素。

The classic example of when you might want to style a parent element is in a menu. A navigation menu is normally an unordered list with a series of list items. Sometimes you may have a sub-menu that may be shown or hidden as a dropdown. It’s always been tricky to style the parent list item that has a sub menu without adding a class. With the new parent selector, it’s possible to achieve without one:

菜单中是您可能希望为父元素设置样式的经典示例。 导航菜单通常是具有一系列列表项的无序列表。 有时，您可能有一个子菜单，该子菜单可能显示为或隐藏为下拉菜单。 在不添加类的情况下对具有子菜单的父级列表项进行样式设置一直很棘手。 有了新的父选择器，就可以不用以下选择器来实现：

.main-menu li! .sub-menu {
  /* add styles to signify that this item has a submenu */
}

The Level 4 Selectors spec is still a work in progress, and I don’t know of any browser that supports it all yet. But when it does get released it will be a wonderful day!

Level 4 Selectors规范仍在开发中，我尚不知道任何支持它的浏览器。 但是当它发布时，将是美好的一天！

翻译自: https://www.sitepoint.com/atoz-css-screencast-general-sibling/