一只思考的螃哈哈 & 荔枝枝

For example, the following selector will match all p elements with a class attribute that contains the value "warning":

p.warning {
    declarations
}

A simple selector may contain more than one attribute selector and/or class selector; in such cases, the selector pattern matches elements whose attributes contain all the specified components. Here’s an example:

div.foo.bar { Element Type Selector和Class Selector结合使用，注意：中间没有空格，有空格的使用方法见下面
    declarations
}
div.foo.bar[title^="Help"] {
    declarations
}

The first example selector above matches div elements whose class attribute value contains both the words "foo" and "bar". The second example selector matches divelements whose class attribute values contains both the words "foo" and "bar", and whose title attribute values begin with the string "Help". To clarify further the html that would match the above selectors could be as follows:

<div class="foo bar">Matches first example</div>
<div class="foo bar" title="Help">Matches second example</div>

We can use the = operator to have an attribute selector match elements that have specific values:

input[type="submit"] {
    declarations
}

This selector matches any input element that has a type attribute with a value equal to "submit".

We can use the |= operator to cause an attribute selector to match elements which have an attribute containing a list of hyphenated words that begin with a specific value:

[hreflang|="en"] {
    declarations
}

This example selector matches any element that has an hreflang attribute containing a value of "en", whether or not that value is followed by a hyphen and more characters. In other words, it matches hreflang attribute values of "en", "en-US", "en-GB", and so on.

We can use the ~= operator to make an attribute selector match elements that have an attribute that contains a list of space-separated words, one of which is the specified value:

[class~="warning"] {
    declarations
}

This selector matches any HTML element with a class attribute that contains a space-separated list of words, one of which is "warning". So it matches <p class="warning"> and <strong class="important warning"> and <div class="warning highlight">, but not <p class="my-warning"> or <ul class="warnings">.

We can group selectors using a comma (,) separator. The following declaration block will apply to any element that matches either of the selectors in the group:

td, th {
    declarations
}

We can think of the comma as a logical OR operator, but it’s important to remember that each selector in a group is autonomous. A common beginner’s mistake is to write groups like this:

#foo td, th {
    declarations
}

A beginner might think that the above declaration block will be applied to all td andth elements that are descendants of the element with an ID of "foo". However, the selector group above is actually equivalent to this:

#foo td {
    declarations
}
th {
    declarations
}

To achieve the true goal, write the selector group as follows:

#foo td, #foo th {
    declarations
}

The combinator we use in a descendant selector is a whitespace character: a space, horizontal tab, carriage return, line feed, or form feed. Since whitespace characters are allowed around all combinators, you can include more than one whitespace character between the simple selectors in a descendant selector.

Consider the following HTML fragment:

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul>

We’ll try to match elements in the above fragment using the selector below:

ul li { 注意：中间有空格了
    declarations
}

This descendant selector will match all four li elements in the example HTML, because each of those elements has a ul element as its ancestor.

This selector matches all elements that are the immediate children of a specified element. The combinator in a child selector is a greater-than sign (>). It may be surrounded by whitespace characters, but if it is, Internet Explorer 5 on Windows will incorrectly treat it as a descendant selector. So the best practice is to eschew whitespace around this combinator.

Consider this HTML fragment:

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

Let’s try to match elements in the above fragment with the selector below:

ul>li {
    declarations
}

The child selector above will only match the two li elements that are children of theul element. It will not match the subitems, because their parent is the ol element.