MDN’s new design is in Beta! A sneak peek:

Combinators and multiple selectors


在我们的关于选择器的最后一篇文章中,我们将探讨组合器和多个选择器 — 将多个选择器组合在一起以用于进一步有用的选择能力的两种方式。


一次使用一个选择器是很有用的,但在某些情况下却可能效率低下。 CSS selectors become even more useful when you start combining them to perform fine-grained selections. CSS has several ways to select elements based on how they are related to one another. Those relationships are expressed with combinators as follows (A and B represent any selector seen above):

Combinators Select
AB 匹配同时满足A和B的任意元素.
A B 匹配任意元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)
A > B 匹配任意元素,满足条件:B是A的直接子节点
A + B 匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)
A ~ B 匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)     



<table lang="en-US" class="with-currency">
      <th scope="col">Product</th>
      <th scope="col">Qty.</th>
      <th scope="col">Price</th>
      <th colspan="2" scope="row">Total:</th>
      <td>Marshmallow rice bar</td>


/* Basic table setup */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;

/* All <td>s within a <table> and all <th>s within a <table>
   Comma is not a combinator, it just allows you to target
   several selectors with the same CSS ruleset */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;

/* All <th>s within <thead>s that are within <table>s */
table thead th {
  color: white;
  background: black;

/* All <td>s preceded by another <td>,
   within a <tbody>, within a <table> */
table tbody td + td {
  text-align: center;

/* All <td>s that are a last child,
   within a <tbody>, within a <table> */
table tbody td:last-child {
  text-align: right

/* All <th>s, within a <tfoot>s, within a <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;

/* All <td>s preceded by a <th>, within a <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;

/* All pseudo-elements "before" <td>s that are a last child,
   appearing within elements with a class of "with-currency" that
   also have an attribute "lang" with the value "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';

/* All pseudo-elements "after" <td>s that are a last child,
   appearing within elements with the class "with-currency" that
   also have an attribute "lang" with the value "fr" */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';

This has given us the following rather nice table styles:

Active learning: Writing your own combinators

The above example was designed to show the sort of complexity you can start to achieve with combinators. In this active learning, we will get you to write some of your own, more simple selectors that include combinators. In this exercise you need to add a selector to rules 2–4, to:

  1. Style links, but only links that are inside the unordered list.
  2. Style links inside the unordered list, only when they are being hovered over.
  3. Style only the paragraph that comes directly after the top level heading.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Multiple selectors on one rule

You have seen multiple examples of this in action already, but let's spell it out clearly for clarification. You can write multiple selectors separated by commas, to apply the same rule to multiple sets of selected elements at once. For example:

p, li {
  font-size: 1.6em;

Or this:

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';

What's next

Congratulations, you've come to the end of our rather long journey into learning about Selectors. Even the most skilled web developers are still amazed by what's possible using selectors — don't feel bad if you can't remember all the options — bookmark the main selectors page and refer back to it when you need to.

In our next article we'll turn to another really important fundamental CSS topic — the kinds of values properties can have, and what units are involved in expressing the length, color, or other values you want.  Let's explore CSS values and units.


 此页面的贡献者: MrSong0607, xgqfrms-GitHub
 最后编辑者: MrSong0607,