Priority and weight analysis of CSS selectors

This article mainly shares with you the priority and weight analysis of CSS selectors, hoping to help you learn more about CSS selectors.

Basic Selector

##*Universal selectorsMatch all elements2.1ETag selectors (Type selectors) matches all 1.class Class selectors Matches all elements with 1#idID selectors match all## Elements with #id="wrapper"E[attr]a[data-url]# that match E[attr=val]Attribute selectors elements with the E[attr~=val]Attribute selectors attributes containing E[attr^=val]Attribute selectors attributes starting with E[attr$=val]Attribute selectors attributes ending with E[attr*=val]Attribute selectors attributes containing E FDescendant selectorsmatch all elements under the element p p

## under all

2.1Adjacent sibling selectorlabel + inputMatch all The first element's sibling2.1Sibling selectorlabel ~ inputMatch all elements with the same All 3label,input, Pseudo-classes are used to specify a specific state or condition of the selector. Pseudo-classes do not exist in the DOM. exists, but is visible to the user. Dynamic pseudo-classes Dynamic pseudo-classes classify elements with characteristics other than their name, attributes or content, and will not be displayed in the document source or text tree. middle.

Selector	Name	Instance	Description	Version
		*
		p
		.nav	class="nav"
		#wrapper	1
Attribute selectors		Elements	of all data-url attributes ##2.1
	a[data-url=' http']	Match all data-url="http"	attribute2.1
	a[data-url~='http']	Matches all data-url	http elements2.1
	a[data-url^='http']	Matches all data-url	http elements3
	a[data-url$='http' ]	Matches all data-url	http elements3
	a[data-url*='http ']	Matches all data-url	http3
p p		All	1##E > F	sub Selectors (Child selectors)
	Matches all children	elements #Element	E + F
		Element	E ~ F
		elements of level	##S1,S2,... selector Group
match all	elements	1	Pseudo-classes and pseudo-elements

Selector

Instance

DescriptionVersion##:link Matches unvisited links1 Matches visited links1 Matches the element over which the mouse pointer is floating 1 Matches the element over which the mouse pointer is pressed 1 Matches the element that receives focus2.1Selector

			a:link
	:visited	a:visited
	:hover	a:hover
	:active	a:active
	:focus	input:focus
	The target pseudo-classes	The target pseudo-class specifies the currently active anchor. You can use the target pseudo-class to set styles for the active anchor.

Instance

Description

Version#tab1:target Matches the active anchor 3

##:target

The language pseudo-classes

Language pseudo-classes add styles to elements with the specified lang attribute.

##:lang(val) Matches the specified 3##The UI element states pseudo-classes

Selector	Instance	Description	Version
	#p:lang(en)	lange="en" Element

The UI element status pseudo-class is mainly used to specify the status of elements in the form.

Selector##:enabled3:disabled3input:checked## The #display and visibility

Instance	Description	Version
input:enabled	Matches the activated element
input:disabled	Match disabled elements		##:checked
	Matches the selected element3

properties have no effect on the UI element state pseudo-class matching

enabled/disabled state. Structural pseudo-classes Structural pseudo-classes are used to specify the specific structure of the document.

Selector

InstanceDescriptionVersion:root:nth-child(n):nth-last-child(n):nth-of-type (n):nth-last-of-type(n):first-child :last-child ##:last-childMatch the last child element of its parent type element3:first-of-type Matches the first child element of its parent element with the same selector3: last-of-typematches the last child element of its parent element that has the same selector3 :only-childThe only child element matching its parent class3:only-childThe only one that matches its parent class Child elements with the same selector :empty match no children Elements (including text nodes) of elements , , :nth-of-type(n),

			##:root
Matches the root element of the document	3	:nth-child(n)
Matches the nth child element of its parent element	3	:nth-last-child(n)
matches its The nth child element from the bottom of the parent class	3	:nth-of-type(n)
Matches the nth child element of its parent class with the same selector	3	:nth-last- of-type(n)
Matches the nth last child element of its parent class with the same selector	3	:first-child
matches its parent element The first child element of	3	:last-child
Match the last child element of its parent element	3		:last-child
			:first-of-type
			:first-of-type
			:only-child
	##:only-of-type
3	:empty
3		:nth-child(n)	:nth- last-child(n)

:nth-last-of-type(n)

where n is from For integers starting with 0, the expression can be written as an+b, a and b are 0 or positive integers. The expression is equivalent to dividing each a sub-element into a group and taking the b-th element of each group. ;The writeable expression for taking the odd or even numbered sub-elements is 2n+1 or even, 2n or odd. The negative pseudo-class is used to select all other elements that are not elements of the specified type. Selector

Instance

DescriptionVersion##:not(s)Match all other elements that are not of the specified type3Selector

			input:not([type="text"])
	Pseudo-elements	Pseudo-elements refer to abstractions that do not exist in the document tree.

Instance

Description

Version::first-line Matches the first line of the element's text content1::first-letter1##::beforebefore the element2.1::afterAfter the element2.1

In CSS 1 and CSS 2, there is only one ":" in the pseudo-class selector, while CSS 3 has two "::" in order to distinguish pseudo-classes and pseudo-elements. Currently, the two writing methods have the same effect. .

::before and ::after must set the content attribute, otherwise the element will not take effect.

Priority and weight

The weight in CSS is divided into 4 levels:

• Inline style (style in HTML document Attribute)

• ID selector

• Class, pseudo-class, attribute selector

• Element , Pseudo-class elements

These 4 levels represent different priorities from high to low. !important can be written after the CSS rules to promote the corresponding rules. to the highest weight.

Related recommendations:

css selector example sharing

Detailed explanation of new usage of CSS selector

Implementation method of CSS selector field parsing

	##::first-line
	::first-letter		Matches the first letter of the element's text content
	::before
	::after

The above is the detailed content of Priority and weight analysis of CSS selectors. For more information, please follow other related articles on the PHP Chinese website!