CSS选择器：组合器-css教程-PHP中文网

首页

web前端

css教程

CSS选择器：组合器

Joseph Gordon-Levitt

Feb 19, 2025 am 11:14 AM

CSS选择器：组合器

钥匙要点

> CSS选择器将规则与元素匹配，Selectors级别3和4级规格介绍了几个新的选择器。其中包括新的属性选择器和组合器，以及一系列新的伪级。
组合器是角色序列，在其两侧的选择器之间表达关系。它们包括后代组合者（Whitespace），儿童组合（>），相邻的兄弟姐妹Combinator（）和一般兄弟姐妹组合者（〜）。
> CSS组合量可以与伪级和属性选择器结合使用，并且可以用于样式的嵌套元素。但是，他们本身没有任何特殊性。它们仅通过定义元素之间的关系来帮助确定选择器的特异性。
> CSS规则与带有选择器的元素匹配。有多种方法可以做到这一点，您可能熟悉其中的大多数。元素类型，类名，ID和属性选择器都是支持良好的CSS选择器，并且广泛使用。

选择器级别3和4级规格引入了几个新的选择器。在某些情况下，这些是现有类型的新变体。在其他情况下，它们是该语言的新功能。

> 在本章中，我们将研究CSS选择器的当前浏览器景观，重点是新的选择器。这包括新的属性选择器和组合器，以及一系列新的伪级。在明智地选择选择器的部分中，我们研究了特异性的概念。>

>本章不再是所有选择者的全面审视 - 这本身本身就是一本书。取而代之的是，我们将专注于具有良好浏览器支持的选择器，这些选择可能在您当前的工作中很有用。有些材料可能是旧帽子，但包括上下文。

提示：选择器的浏览器覆盖范围

可以在CSS4-Selector上找到浏览器支持的当前状态。

>以下是我们书中的摘录，CSS大师，由蒂法尼·B·布朗（Tiffany B. Brown）撰写。副本在全球范围内出售，或者您可以在此处以电子书形式购买。

组合

组合器是角色序列，在其两侧的选择器之间表达关系。使用组合器会创建所谓的复杂选择器。在某些情况下，复杂的选择器可以是定义样式的最简洁的方法。

您应该熟悉大多数这些组合者：>

>后代组合者或whitespace字符
>儿童组合者，或>
相邻的兄弟姐妹组合者或

使用以下html的块创建此表单： CSS选择器：组合器

后代组合

<span><span><span><form> method<span>="GET"</span> action<span>="/processor"</span>></form></span>
</span><span><span><span><h1 id="gt">></h1></span>Buy Tickets to the Web Developer Gala<span><span></span>></span>
</span><span><span><span><p>></p></span>Tickets are  each. Dinner packages are an extra . All fields are required.<span><span></span>></span>
</span><span><span><span><fieldset>></fieldset></span>
</span>	<span><span><span><legend>></legend></span>Tickets and Add-ons<span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="quantity"</span>></label></span>Number of Tickets<span><span></span>></span> 
</span>		<span><span><span><span> class<span>="help"</span>></span>Limit 8<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span><span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="quantity"</span>></label></span>Dinner Packages<span><span></span>></span> 
</span>		<span><span><span><span> class<span>="help"</span>></span>Serves 2<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span>	<span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span><span><span><span><fieldset>></fieldset></span>
</span>	<span><span><span><legend>></legend></span>Payment<span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="ccn"</span>></label></span>Credit card number<span><span></span>></span>
</span>		<span><span><span><span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span>
</span>	<span><span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="expiration"</span>></label></span>Expiration date<span><span></span>></span>
</span>		<span><span><span><span> class<span>="help"</span>></span><span><span><abbr> title<span>="Two-digit month"</span>></abbr></span>MM<span><span></span>></span>/<span><span><abbr> title<span>="Four-digit Year"</span>></abbr></span>MM<span><span></span>></span>YYYY<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span>
</span>	<span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span><span><span><span><fieldset>></fieldset></span>
</span>	<span><span><span><legend>></legend></span>Billing Address<span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="name"</span>></label></span>Name<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> 
</span>	<span><span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="street_address"</span>></label></span>Street Address<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span>
</span>	<span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="city"</span>></label></span>City<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span>
</span>	<span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="state"</span>></label></span>State<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span>
</span>	<span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="zip"</span>></label></span>ZIP<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span>
</span>	<span><span><span></span>></span>
</span><span><span><span></span>></span>
</span>
<span><span><span><button> type<span>="submit"</span>></button></span>Buy Tickets!<span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

>您可能对后代组合者非常熟悉。自CSS早期以来就已经存在（尽管直到CSS2.1一直没有类型的名称）。它被广泛使用并得到广泛支持。

后代组合者只是一个空格角色。它按照模式

a b

将父级选择器与后代分开，其中

b 是由a>包含的元素。让我们从上方添加一些CSS，看看它的工作原理：> 我们刚刚更改了表单标题的颜色，其结果可以在下面看到。

>让我们添加更多CSS，这次是增加我们的定价消息的大小（“门票为每张$ 10”）：

<span>form h1 {
</span><span>color: #009;
</span><span>}</span>

>但是，该选择器存在问题，如下所示。实际上，我们在表格的段落的所有中都增加了文本的大小，这不是我们想要的。我们该如何解决？让我们尝试孩子组合。 CSS选择器：组合器

孩子组合

<span>form p {
</span><span>font-size: 22px;
</span><span>}</span>

与后代组合器相比，子组合者（>）仅选择一个元素的>直接子女

。它遵循模式a> b ，与任何元素

匹配，其中

a

是直接祖先。

如果是人的元素，则使用类比，孩子组合将与母元素的孩子相匹配。但是，后代组合也将与她的孙子和曾孙相匹配。让我们修改以前的选择器以使用儿童组合器： 现在只有文章的直接子女受到影响，如下所示。 相邻的兄弟姐妹组合 >在相邻的兄弟姐妹Combinator（）的情况下，我们可以选择彼此关注并具有相同父的元素。它遵循模式a b

。样式将应用于

的元素，这些元素是

<span>form <span>> p</span> {
</span><span>font-size: 22px;
</span><span>}</span>

之前的

>让我们回到我们的榜样。请注意，我们的标签和输入彼此相邻。这意味着我们可以使用相邻的兄弟姐妹组合器使它们坐在不同的行上：

<span><span><span><form> method<span>="GET"</span> action<span>="/processor"</span>></form></span>
</span><span><span><span><h1 id="gt">></h1></span>Buy Tickets to the Web Developer Gala<span><span></span>></span>
</span><span><span><span><p>></p></span>Tickets are  each. Dinner packages are an extra . All fields are required.<span><span></span>></span>
</span><span><span><span><fieldset>></fieldset></span>
</span>	<span><span><span><legend>></legend></span>Tickets and Add-ons<span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="quantity"</span>></label></span>Number of Tickets<span><span></span>></span> 
</span>		<span><span><span><span> class<span>="help"</span>></span>Limit 8<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span><span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="quantity"</span>></label></span>Dinner Packages<span><span></span>></span> 
</span>		<span><span><span><span> class<span>="help"</span>></span>Serves 2<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="number"</span> value<span>="1"</span> name<span>="quantity"</span> id<span>="quantity"</span> step<span>="1"</span> min<span>="1"</span> max<span>="8"</span>></span>
</span>	<span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span><span><span><span><fieldset>></fieldset></span>
</span>	<span><span><span><legend>></legend></span>Payment<span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="ccn"</span>></label></span>Credit card number<span><span></span>></span>
</span>		<span><span><span><span> class<span>="help"</span>></span>No spaces or dashes, please.<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="ccn"</span> name<span>="ccn"</span> placeholder<span>="372000000000008"</span> maxlength<span>="16"</span> size<span>="16"</span>></span>
</span>	<span><span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="expiration"</span>></label></span>Expiration date<span><span></span>></span>
</span>		<span><span><span><span> class<span>="help"</span>></span><span><span><abbr> title<span>="Two-digit month"</span>></abbr></span>MM<span><span></span>></span>/<span><span><abbr> title<span>="Four-digit Year"</span>></abbr></span>MM<span><span></span>></span>YYYY<span><span></span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="expiration"</span> name<span>="expiration"</span> placeholder<span>="01/2018"</span> maxlength<span>="7"</span> size<span>="7"</span>></span>
</span>	<span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span><span><span><span><fieldset>></fieldset></span>
</span>	<span><span><span><legend>></legend></span>Billing Address<span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="name"</span>></label></span>Name<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: John Q. Public"</span> size<span>="40"</span>></span> 
</span>	<span><span><span></span>></span>
</span>	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="street_address"</span>></label></span>Street Address<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="name"</span> name<span>="name"</span> placeholder<span>="ex: 12345 Main Street, Apt 23"</span> size<span>="40"</span>></span>
</span>	<span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="city"</span>></label></span>City<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="city"</span> name<span>="city"</span> placeholder<span>="ex: Anytown"</span>></span>
</span>	<span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="state"</span>></label></span>State<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="state"</span> name<span>="state"</span> placeholder<span>="CA"</span> maxlength<span>="2"</span> pattern<span>="[A-W]{2}"</span> size<span>="2"</span>></span>
</span>	<span><span><span></span>></span>
</span>
	<span><span><span><p>></p></span>
</span>		<span><span><span><label> for<span>="zip"</span>></label></span>ZIP<span><span></span>></span>
</span>		<span><span><span><input> type<span>="text"</span> id<span>="zip"</span> name<span>="zip"</span> placeholder<span>="12345"</span> maxlength<span>="5"</span> pattern<span>="0-9{5}"</span> size<span>="5"</span>></span>
</span>	<span><span><span></span>></span>
</span><span><span><span></span>></span>
</span>
<span><span><span><button> type<span>="submit"</span>></button></span>Buy Tickets!<span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

>您可以看到下面的结果。

让我们看一下将通用选择器（*）与类型选择器结合的另一个示例：>

<span>form h1 {
</span><span>color: #009;
</span><span>}</span>

这个示例将每个fieldset元素的顶部和底部添加一个5em余量，如下所示。由于我们使用的是通用选择器，因此无需担心以前的元素是另一个fieldset还是P元素。

注意：相邻同胞选择器的更多用途

Heydon Pickering在他的文章“ Axiomatic CSS和Lobotomized Owls”中探索了相邻兄弟姐妹选择器的更多巧妙用途。

>如果我们想与我们的门票字段一样，

不与另一个相邻的同级元素？在这种情况下，我们可以使用一般的兄弟姐妹组合。

一般兄弟姐妹组合 >与一般的兄弟姐妹组合者（一个Tilde）我们可以选择共享同一父母的元素，而无需考虑它们是否相邻。给定模式

a〜b

，此选择器匹配所有

>让我们再次查看门票字段的数量。它的标记看起来像这样： 我们的输入元素遵循标签元素，但是之间有一个跨度元素。由于跨度元素位于输入和标签之间，因此相邻的兄弟姐妹组合者将在这里工作。让我们将相邻的兄弟姐妹组合者更改为一般的兄弟姐妹组合者：> 现在，我们的所有输入元素都位于与标签元素的单独线上，如下所示。

当您缺乏对标记的完全控制时，使用一般兄弟姐妹组合器是最方便的。否则，最好调整标记以添加类名。请记住，一般的兄弟姐妹组合可能会在大型代码库中产生一些意外的副作用，因此请谨慎使用。