组合器

一次使用一个选择器是有用的，但在某些情况下可能效率低下。 当您开始组合它们以执行细粒度选择时，CSS选择器变得更加有用。 CSS有几种方法来选择元素，基于它们如何相互关联。 这些关系用组合器表示如下(A和B表示上面看到的任何选择器):

组合器示例

让我们看一个例子，所有这些一起工作:

<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Qty.</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lawnchair</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow rice bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

然后让我们使用下面的样式表:

/* 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: ' €';
}

这给了我们以下相当不错的表样式:

主动学习:编写自己的组合器

以上示例旨在显示您可以使用组合器开始实现的复杂性。 在这种主动学习中，我们将让你写一些自己的，更简单的选择器，包括组合器。 在本练习中，您需要向规则2-4添加选择器，以:

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.

如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>  
  <li><a href="#">About</a></li>
</ul>

<h1>Welcome to my website</h1>

<p>Hello, and welcome! I hope you enjoy your time here.</p>

<h2>My philosophy</h2>

<p>I am a believer in chilling out, and not getting grumpy. I think everyone else should follow this ideal, and <a href="#">drink green tea</a>.</p></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">ul {
  padding: 0;
  list-style-type: none;
}

 {
  text-decoration: none;
  display: block;
  color: black;
  background-color: red;
  padding: 5px;
  margin-bottom: 10px;
}

 {
  color: red;
  background-color: black;
}

 {
  font-style: bold;
  color: blue;
}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;overflow:auto;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'ul {\n  padding: 0;\n  list-style-type: none;\n}\n\nul a {\n  text-decoration: none;\n  display: block;\n  color: black;\n  background-color: red;\n  padding: 5px;\n  margin-bottom: 10px;\n}\n\nul a:hover {\n  color: red;\n  background-color: black;\n}\n\nh1 + p {\n  font-style: bold;\n  color: blue;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

一个规则上有多个选择器

你已经看到了这个在行动的多个例子，但让我们清楚地阐明它澄清。 您可以编写多个选择器，以逗号分隔，以将同一规则一次性应用到多个选定元素集。 例如:

p, li {
  font-size: 1.6em;
}

或这个:

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

下一步是什么

恭喜，您已经到了我们相当长的时间去了解Selectors的结束。 即使是最熟练的Web开发人员仍然对使用选择器的可能性感到惊讶 - 如果您不记得所有选项，请不要感觉不好 - 将主要的选择器页面 a>并在需要时参考它。

在下一篇文章中，我们将讨论另一个非常重要的基本CSS主题 - 值属性的种类，以及表示长度，颜色或其他值的单位。 让我们探索 CSS值和单位。