Shulou(Shulou.com)06/03 Report--

This article introduces the selector and style priority in CSS, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Priority: from high to low (from top to bottom)

! important

Inline (1, 0, 0, 0, 0)

Id: (0Jing 1 Jing 0Jing 0)

Class: (0pd0pl 1p0pl 0)

Pseudo classes / attributes

Element: (0pl 0pl 0pl 1)

Wildcard character

Class selector

Class= "web", multiple elements can have the same class name

Id selector

Id= "web" with uniqueness

Pseudo class selector

The CSS pseudo class (pseudo-class) is a keyword added after the selector to specify the state of the element.

Link related

A:link unvisited links

Links visited by a:visited

A:hover mouse over the link

A:active selected links

: target can be used to select the target element of the current activity, href= "# 222" (content jump)

Form element correlation

The focus pseudo-class adds a special style to the element when it gets focus

: disabled matches each disabled element (mostly used on form elements).

: enabled represents any enabled (enabled) element

: checked matches each selected input element (for radio buttons and check boxes only) (only supported by opera)

Father-son relationship

: empty represents an element without child elements, only element nodes and text (including spaces) are calculated, comments and run instructions are not taken into account.

: first-child represents an element that is the first child of its parent element

CSS Code copies content to the clipboard

: first-of-type

: last-of-type

The nth-clild (n) selector matches the Nth child element that belongs to its parent element, regardless of element type

N can be a number, a keyword, or a formula (2) (n is a counter (starting at 0), b is an offset value)

: nth-last-child (n) reciprocal

: nth-of-type (n)

Attribute selector

E [attr]

E [attr=value]

The E [attr~=value] selector is used to select the element containing the specified term in the attribute value

The E [attr^ = value] selector matches each element whose attribute value begins with the specified value.

Father-son relationship

Any An E is a descendant of element An element E (descendant nodes refer to child nodes of A, child nodes, and so on)

A > E child of any element A (direct)

CSS Code copies content to the clipboard

E [attr*=value]

E [attr$=value]

Relationship-based selector

Brotherly relationship

B + E the next sibling element E of any element B (direct)

The sibling element E with a common parent element after the B ~ E B element

And

.class1.class2 elements that contain both class1 and class2 attributes

F#id has the F element of an id

Or

All E or F elements

Pseudo element

E:first-line adds a special style to the first line of the text.

E:first-letter adds a special style to the first letter of the text.

E:before adds content before the element.

E:after adds content after the element.

About the selector and style priority in CSS is shared here, I hope the above content can be of some help to you, you can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.