CSS Selector Summary

This article introduces the usage and summary of the CSS3 selector, including General selectors, attribute selectors, pseudo-class selectors, and the code farmers interested in CSS selectors can read this article.

A universal Selector

1 *{} wildcard selector (CSS2): Fits all element objects.
2 e type (HTML) selector (CSS1): Takes the Document language object type Dom as a selector.
3 E#myid is the ID selector (CSS1): An E object with a unique identifier id attribute equal to myID as the selector.
4 E.myclass is the class CSS1: The E object that contains MyClass as the Class property is the selector.
5 e F: Contains the selector (CSS1): Selects all F elements that are contained by the E element.

CSS3 New Universal selector: Sibling element Universal selector:

1 Universal Selector e~f{}: matches the E element after the sibling F element matches all the F,ef peers behind E. As long as F is behind E, E is only a reference. e~f {background: #ff0;}
2 near (adjacent) selector (CSS2): The E+f{}:ef element is adjacent, that is, the F element is chosen to cling to the E element.
3 contains (sub) selectors (CSS2): E>f{}:ef can not be generational, E can only match to the next neighboring generation F.

Two-Attribute Selector

1. E[att^= "Val"]: Select the e element with the ATT attribute and the property value as a string starting with Val.
2. E[att$= "Val"]: Select the e element that has the ATT attribute and the property value is the string ending in Val.
3. E[att*= "Val"]: Select the e element with the ATT attribute and the property value as a string containing Val.
4. E[att|= "Val"] Select the e element with the ATT attribute and the attribute value to begin with Val and the string separated by the connector "-".
5. E[att] Select the e element that has the ATT attribute.
6. E[att= "Val"] Select the e element that has the ATT attribute and the attribute value equals Val.
7. E[att~= "Val"] Select the list of words with the ATT attribute with a space-delimited attribute value, one of which equals the e element of Val.
Note: 4~7 is a unique attribute of CSS2. Input is the most commonly used property selector.

Three pseudo class selectors

1 pseudo-classes related to the user interface:
(1) e:enabled: Matches elements that are active in the form, elements that can be manipulated in the form.
(2) e:disabled (Common): commonly used to match the disabled element in the form disabled= "disabled". Eg:input[type= "text"]:d isabled {background: #ddd;} can only be viewed as not operable.
(3) E:checked: Matches the selected radio (radio box) or checkbox (checkbox) element in the form
is the whole pseudo-class (matching the entire DOM document):
(4):: Selection matches the currently selected element of the user, that is, the color to set when the object is selected. :: Selection.

2 Structural pseudo-class

1): Root matches the root element of the document, and for an HTML document, only the HTML root element is matched.
2) E:nth-child (n) matches its current element
E:nth-child (n): matches the nth child element of its parent element E, the first number is 1
e f:nth-child (N): matches the nth F element of its parent element E, the first number is 1 (seemingly only available for UL)
3) E:nth-last-child (n): matches the reciprocal nth child element of its parent element, and the first number is 1.
E:last-child: Matches the last child element of the parent element, equivalent to: Nth-last-child (1).
4) E:nth-of-type (n): Similar to: Nth-child (n), but only matches elements that use the same label.
5) E:nth-last-of-type (n): Similar to: Nth-last-child (n), but only matches elements that use the same label.
6) E:first-of-type: Matches the first child element of the same label under the parent element, equivalent to: Nth-of-type (1).
7) E:last-of-type: Matches the last child element of the same label under the parent element, equivalent to: Nth-last-of-type (1).
8) E:only-child: Matches only one child element of the parent element.
9) E:only-of-type: The only child element that matches the same label used under the parent element, is equivalent to: First-of-type,:last-of-type or: Nth-of-type (1),: Nth-last-of-type (1).
E:empty match an element that does not contain any child elements, note that the text node is also considered a child element. A blank node is also considered a child node.
E:not (s) matches any element that does not conform to the current selector: not (: Nth-child (1)).

3 linking Pseudo-class selectors

1) e:link{}: Link pseudo-class selector to set the style of hyperlink a before it is accessed.
2) e:visited{}: Link pseudo-class selector, set hyperlink a style whose link address has been accessed out of date.
3) e:hover{}: The user operates a pseudo-class selector that sets the style of the element when its mouse hovers.
4) e:active{}: The user operates the pseudo-class selector, setting the style of the element when it is activated by the user (an event that occurs between mouse clicks and releases).
5) e:focus{} The user operates the pseudo-class selector, setting the style of the element when it becomes the input focus (the onfocus event of the element occurs).
6) e:lang{}: Pseudo-class selector that matches the E element using a special language.

CSS3 Selector

In CSS, a selector is a pattern that selects the elements that need to be added to a style.

The CSS column indicates which version of the CSS the property is defined in. (CSS1, CSS2 or CSS3. ）

Selector

Selector	Example	Example Description	CSS
. class	. intro	Select all elements of class= "Intro"	1
#ID	#firstname	Select all elements of id= "FirstName"	1
*	*	Select all elements	2
Element	P	Select all <p> elements	1
Element,element	Div,p	Select all <div> elements and <p> elements	1
element element	Div p	Select all <p> elements within the <div> element	1
element>element	Div>p	Select all the parent is the <p> element of the <div> element	2
element+element	Div+p	Select all <p> elements immediately following the <div> element	2
[attribute]	[Target]	Select all elements with the target property	2
[attribute=value]	[Target=-blank]	Select all elements that use target= "-blank"	2
[attribute~=value]	[Title~=flower]	Select the Title property contains all elements of the word "flower"	2
[attribute|=language]	[Lang|=en]	Select the starting value of a lang attribute = all elements of "EN"	2
: Link	A:link	Select All not visited links	1
: Visited	a:visited	Select all the links you have visited	1
: Active	A:active	Select Active link	1
: hover	A:hover	Select mouse over link	1
: Focus	Input:focus	Select the INPUT element with focus	2
: First-letter	P:first-letter	Select the first letter of each <P> element	1
: First-line	P:first-line	Select the first line of each <P> element	1
: First-child	P:first-child	Specifies a style only if the <p> element is the first child of its parent.	2
: Before	P:before	Insert content before each <p> element	2
: After	P:after	Insert content after each <p> element	2
: lang (language)	P:lang (IT)	Select the starting value of a lang property = all <p> elements of "it"	2
element1~element2	P~ul	Select each UL element after the P element	3
[attribute^=value]	a[src^= "https"]	Select the element with the value of each SRC attribute beginning with "https"	3
[attribute$=value]	A[src$= ". pdf"]	Select the element that ends with a ". pdf" value for each SRC attribute	3
[attribute*=value]	A[src*= "44lan"]	Select the value of each SRC attribute that contains the element "44lan" of the substring	3
: First-of-type	P:first-of-type	Select each P element to be the first P-element of its parent	3
: Last-of-type	P:last-of-type	Select each P element is the last P element of its parent	3
: Only-of-type	P:only-of-type	Select each P element to be the only P element of its parent	3
: Only-child	P:only-child	Select each P-element to be the only child of its parent	3
: Nth-child (n)	P:nth-child (2)	Select each P-element is the second child of its parent	3
: Nth-last-child (n)	P:nth-last-child (2)	Select the second child element of each P-element that is its parent, counting from the last subkey	3
: Nth-of-type (n)	P:nth-of-type (2)	Select each P element is the second P element of its parent	3
: Nth-last-of-type (n)	P:nth-last-of-type (2)	Select the second P element for each P element that is its parent, counting from the last subkey	3
: Last-child	P:last-child	Select each P-element to be the last child of its parent.	3
: Root	: Root	Select the root element of the document	3
: Empty	P:empty	Select each P element without any children (including text nodes)	3
: Target	#news: Target	Select the currently active #news element (the URL of the click that contains the anchor name)	3
: Enabled	Input:enabled	Select each INPUT element that is enabled	3
:d isabled	Input:disabled	Select each of the disabled input elements	3
: Checked	Input:checked	Select each selected INPUT element	3
: Not (selector)	: Not (P)	Select each element that is not a P element	3
:: Selection	:: Selection	Matches the part of the element that is selected by the user or is in the highlighted state	3
: Out-of-range	: Out-of-range	INPUT element that matches the value outside the specified interval	3
: In-range	: In-range	INPUT element that matches the value within the specified interval	3
: Read-write	: Read-write	Used to match readable and writable elements	3
: read-only	: read-only	The element used to match the setting "ReadOnly" (read-only) attribute	3
: Optional	: Optional	Used to match optional input elements	3
: Required	: Required	Used to match elements that have the "required" property set	3
: Valid	: Valid	Used to match elements with input values that are legal	3
: invalid	: invalid	Used to match an element with an invalid input value	3

Original address: http://www.manongjc.com/article/716.html

CSS Selector related reading:

Knowledge of CSS selector precedence (weights)

CSS tag Selector, ID selector, class selector instance

CSS selector type and its usage introduction

CSS series selector and descendant selector introduction and examples

CSS Selector Details Explained

Examples of usages of pseudo-selectors in CSS

Logic processing in the CSS selector

CSS Selector Precedence detailed description

CSS Tall Upper selector: nth-child () application Example

CSS Selector detailed

CSS Selector Summary