CSS 选择器

CSS 选择器 define the elements to which a set of CSS rules apply.

注意 : There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.

基本选择器

Universal selector: Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
句法： * ns |* *|*
范例： * will match all the elements of the document.
类型选择器: Selects all elements that have the given node name.
句法： elementname
范例： input will match any <input> 元素。
类选择器: Selects all elements that have the given class 属性。
句法： . classname
范例： .index will match any element that has a class of "index".
ID 选择器: Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
句法： # idname
范例： #toc will match the element that has the ID "toc".
属性选择器: Selects all elements that have the given attribute.
句法： [ attr ] [ attr = value ] [ attr ~= value ] [ attr |= value ] [ attr ^= value ] [ attr $= value ] [ attr *= value ]
范例： [autoplay] will match all elements that have the autoplay attribute set (to any value).

选择器列表: , is a grouping method, it selects all the matching nodes.
句法： A , B
范例： div, span will match both <span> and <div> elements.

Descendant combinator: (space) combinator selects nodes that are descendants of the first element.
句法： A B
范例： div span will match all <span> elements that are inside a <div> 元素。
Child combinator: > combinator selects nodes that are direct children of the first element.
句法： A > B
范例： ul > li will match all <li> elements that are nested directly inside a <ul> 元素。
General sibling combinator: ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
句法： A ~ B
范例： p ~ span will match all <span> elements that follow a <p> , immediately or not.
Adjacent sibling combinator: + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
句法： A + B
范例： h2 + p will match all <p> elements that directly follow an <h2> .
Column combinator: || combinator selects nodes which belong to a column.
句法： A || B
范例： col || td will match all <td> elements that belong to the scope of the <col> .

Pseudo classes: : pseudo allow the selection of elements based on state information that is not contained in the document tree.
范例： a:visited will match all <a> elements that have been visited by the user.
Pseudo elements: :: pseudo represent entities that are not included in HTML.
范例： p::first-line will match the first line of all <p> elements.

规范	状态	注释
Selectors Level 4	工作草案	添加 `\|\|` column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3	推荐	添加 `~` general sibling combinator and tree-structural pseudo-classes. Made pseudo-elements use a `::` double-colon prefix. Additional attribute selectors
CSS Level 2 (Revision 1)	推荐	添加 `>` child and `+` adjacent sibling combinators. 添加 universal and attribute selectors.
CSS Level 1	推荐	初始定义。

见 pseudo-class and pseudo-element specification tables for details on those.