Combinators and multiple selectors

組合器

一次使用一個(gè)選擇器是有用的，但在某些情況下可能效率低下。 當(dāng)您開始組合它們以執(zhí)行細(xì)粒度選擇時(shí)，CSS選擇器變得更加有用。 CSS有幾種方法來選擇元素，基于它們?nèi)绾蜗嗷リP(guān)聯(lián)。 這些關(guān)系用組合器表示如下(A和B表示上面看到的任何選擇器):

組合器示例

讓我們看一個(gè)例子，所有這些一起工作:

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

這給了我們以下相當(dāng)不錯(cuò)的表樣式:

主動(dòng)學(xué)習(xí):編寫自己的組合器

以上示例旨在顯示您可以使用組合器開始實(shí)現(xiàn)的復(fù)雜性。 在這種主動(dòng)學(xué)習(xí)中，我們將讓你寫一些自己的，更簡(jiǎn)單的選擇器，包括組合器。 在本練習(xí)中，您需要向規(guī)則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.

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。

<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);

一個(gè)規(guī)則上有多個(gè)選擇器

你已經(jīng)看到了這個(gè)在行動(dòng)的多個(gè)例子，但讓我們清楚地闡明它澄清。 您可以編寫多個(gè)選擇器，以逗號(hào)分隔，以將同一規(guī)則一次性應(yīng)用到多個(gè)選定元素集。 例如:

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

或這個(gè):

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

下一步是什么

恭喜，您已經(jīng)到了我們相當(dāng)長的時(shí)間去了解Selectors的結(jié)束。 即使是最熟練的Web開發(fā)人員仍然對(duì)使用選擇器的可能性感到驚訝 - 如果您不記得所有選項(xiàng)，請(qǐng)不要感覺不好 - 將主要的選擇器頁面 a>并在需要時(shí)參考它。

在下一篇文章中，我們將討論另一個(gè)非常重要的基本CSS主題 - 值屬性的種類，以及表示長度，顏色或其他值的單位。 讓我們探索 CSS值和單位。