CSS选择子简明参考

Type Selector

Example

h1 { }

Description

Selects an HTML tag/element.

 

Universal selector

Example

* { }

Description

Selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator, for example).

 

Class selector

Example

.box { }

Description

Matches elements based on the contents of their class attribute.

 

id selector

Example

#unique { }

Description

Matches an element based on the value of its id attribute. In order for the element to be selected, its ID attribute must match exactly the value given in the selector.

 

Attribute selector

Example

a[title] { }

p[title="myTitle"] { }

Description

Matches elements based on the presence or value of a given attribute.

 

Pseudo-class selector

Example

p:first-child { }

a:hover { }

Description

Specifies a special state of the selected element(s).

 

Pseudo-element selector

Example

p::first-line { }

Description

Lets you style a specific part of the selected element(s).

 

Descendant combinator

Example

h1 p { }

Description

Matched by the second selector are selected if they have an ancestor (parent, parent's parent, etc) element matching the first selector.

 

Child combinator

Example

h1 > p { }

Description

Matches only those elements matched by the second selector that are the direct children of elements matched by the first.

 

Adjacent sibling combinator

Example

img + p { }

Description

Matches the second element only if it immediately follows the first element, and both are children of the same parent element.

 

General sibling combinator

Example

img ~ p { }

Description

Matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.