CSS - 组合器和选择器列表

Combinators and selector lists

Groups of selectors on one rule

型如： A_Selector, B_Selector, ...

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

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

注意这种模式中，若某一个选择器不被浏览器支持，那么整个选择器列表的匹配都会被忽略。

Descendant combinator

型如： A_Selector B_Selector

任何匹配 B 的元素，但同时这些元素是一个同 A 匹配的元素的后代。

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

selector1 selector2 {
  /* property declarations */
}

    <ul>
        <li>
            <div>Item 1</div>
            <ul>
                <li>Subitem A</li>
                <li>Subitem B</li>
            </ul>
        </li>
        <li>
            <div>Item 2</div>
            <ul>
                <li>Subitem A</li>
                <li>Subitem B</li>
            </ul>
        </li>
    </ul>

li {
    list-style-type: disc;
}

li li {
    list-style-type: circle;
}

Child combinator

型如： A_Selector > B_Selector

任何匹配 B 的元素，但同时这些元素是一个同 A 匹配的元素的直接子代。

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

selector1 > selector2 { style properties }

    <div>
        <span>Span #1, in the div.
            <span>Span #2, in the span that's in the div.</span>
        </span>
    </div>
    <span>Span #3, not in the div at all.</span>

span {
    background-color: greenyellow;
}

div>span {
    background-color: DodgerBlue;
}

Adjacent sibling combinator

型如： A_Selector + B_Selector

任何匹配 B 的元素，但同时这些元素是同 A 匹配的元素的下一个兄弟元素(B 为紧接着 A 的子元素)。意为 A & B 拥有相同的父元素。

/* Paragraphs that come immediately after any image */
img + p {
  font-style: bold;
}

former_element + target_element { style properties }

    <ul>
        <li>One</li>
        <li>Two!</li>
        <li>Three</li>
    </ul>

li:first-of-type+li {
    color: red;
}

General sibling combinator

型如： A_Selector ~ B_Selector

任何匹配 B 的元素，但同时这些元素是同 A 匹配的兄弟元素之一。意为 A & B 拥有相同的父元素。

/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}

former_element ~ target_element { style properties }

    <span>This is not red.</span>
    <p>Here is a paragraph.</p>
    <code>Here is some code.</code>
    <span>And here is a red span!</span>
    <code>More code...</code>
    <span>And this is a red span!</span>

p ~ span {
    color: red;
}

---***---

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