Home >Web Front-end >JS Tutorial >Priority and weight analysis of CSS selectors

Priority and weight analysis of CSS selectors

小云云Original: 2018-02-28 13:30:411805browse

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	http`3`
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
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.