CSS-Selector notes

Note is divided into two parts: Today is the CSS selector, and later there is a part of the XPath selector. Today's note contains 44 selectors, basically covering all the rules of CSS 2 and CSS 3.

==================================

CSS selector notes

I. Basic Selector

Serial number	Selector	Description
1.	*	Common Element selector, matching any element
2.	E	Tag selector that matches all elements using the E tag
3.	. Info	The class selector matches all elements in the class attribute that contain info.
4.	# Footer	Id selector, matching all elements whose ID attribute is equal to footer

Instance:

* {Margin: 0; padding: 0 ;}

P {font-size: 2em ;}

. Info {Background: # ff0 ;}

P.info {Background: # ff0 ;}

P.info. error {color: #900; font-weight: bold ;}

# Info {Background: # ff0 ;}

P # info {Background: # ff0 ;}

2. Multi-element combination Selector

Serial number	Selector	Description
5.	E, F	Multi-element selector that matches all Eelements or f elements simultaneously. Separate E and F with commas (,).
6.	E F	The descendant element selector matches all f elements belonging to the descendant of the Eelement. E and F are separated by spaces.
7.	E> F	Child element selector, matching the child element F of all eElements
8.	E + F	Adjacent to the element selector, matching all elements of the same level F that follow the Eelement

Instance:

Div P {color: # f00 ;}

# Nav Li {display: inline ;}

# Nav A {font-weight: bold ;}

Div> strong {color: # f00 ;}

P + P {color: # f00 ;}

Iii. CSS 2.1 attribute Selector

Serial number	Selector	Description
9.	E [ATT]	Matches all the eElements with the ATT attribute, regardless of its value. (Note: E can be omitted here, for example, "[cheacked]". .)
10.	E [ATT = Val]	Matches all the eElements whose ATT attribute is equal to "Val ".
11.	E [ATT ~ = Val]	Matches all ATT attributes with values separated by multiple spaces, and an Eelement whose values are equal to "Val"
12.	E [ATT | = Val]	Matches all ATT attributes with values separated by font numbers (hyphen-separated), and an Eelement whose values start with "Val", which is mainly used for the lang attribute, for example, "en", "En-us", and "En-GB"

Instance:

P [title] {color: # f00 ;}

Div [class = Error] {color: # f00 ;}

TD [headers ~ = Col1] {color: # f00 ;}

P [Lang | = en] {color: # f00 ;}

BLOCKQUOTE [class = quote] [Cite] {color: # f00 ;}

Iv. pseudo classes in CSS 2.1

Serial number	Selector	Description
13.	E: First-child	Match the first child element of the parent Element
14.	E: Link	Match All unclicked links
15.	E: visited	Match all clicked links
16.	E: Active	Match the Eelement that has been pressed and not released by the mouse
17.	E: hover	Matching the Eelement on which the mouse is hovering
18.	E: Focus	Matches the Eelement that obtains the current focus
19.	E: Lang (c)	Matches an Eelement whose Lang property is equal to C.

Instance:

P: First-child {font-style: italic ;}

Input [type = text]: Focus {color: #000; Background: # FFE ;}

Input [type = text]: Focus: hover {Background: # FFF ;}

Q: Lang (SV) {quotes: "\ 201d" "\ 201d" "\ 2019" "\ 2019 ";}

5. pseudo elements in CSS 2.1

Serial number	Selector	Description
20.	E: first-line	Match the first line of the Eelement
21.	E: First-letter	Match the first letter of the Eelement
22.	E: before	Insert the generated content before the Eelement
23.	E: After	Insert the generated content after the Eelement

Instance:

P: first-line {font-weight: bold; color; #600 ;}

. Preamble: First-letter {font-size: 1.5em; font-weight: bold ;}

. CBB: Before {content: ""; display: block; Height: 17px; width: 18px; Background: url(top.png) No-repeat 0 0; margin: 0 0 0-18px ;}

A: Link: After {content: "(" ATTR (href )")";}

6. General selector of the same level element of CSS 3

Serial number	Selector	Description
24.	E ~ F	Matches any F element at the same level after the Eelement

Instance:

P ~ Ul {Background: # ff0 ;}

VII. CSS 3 attribute Selector

Serial number	Selector	Description
25.	E [ATT ^ = "Val"]	Element whose attribute ATT value starts with "Val"
26.	E [ATT $ = "Val"]	Element whose attribute ATT value ends with "Val"
27.	E [ATT * = "Val"]	The value of the attribute ATT contains elements of the "Val" string.

Instance:

Div [ID ^ = "nav"] {Background: # ff0 ;}

8. pseudo classes related to user interfaces in CSS 3

Serial number	Selector	Description
28.	E: Enabled	Matches the activated elements in the form.
29.	E: Disabled	Match the disabled elements in the form
30.	E: checked	Match the selected radio or checkbox elements in the form.
31.	E: Selection	Matches the currently selected element of the user.

Instance:

Input [type = "text"]: Disabled {Background: # DDD ;}

9. structural pseudo classes in CSS 3

Serial number	Selector	Description
32.	E: Root	Matches the root element of a document. For an HTML document, it is an HTML element.
33.	E: Nth-child (N)	Matches the nth child element of the parent element. The first child element is 1.
34.	E: Nth-last-child (N)	Matches the nth child element of the parent element. The first child element is 1.
35.	E: Nth-of-type (n)	Similar to: Nth-child (), but only matches the elements that use the same label.
36.	E: Nth-last-of-type (n)	Similar to Nth-last-child (), but only matches the elements that use the same label.
37.	E: Last-child	Matches the last child element of the parent element, which is equivalent to Nth-last-Child (1)
38.	E: first-of-type	Match the first child element that uses the same label under the parent element, equivalent to: Nth-of-type (1)
39.	E: Last-of-type	Match the last child element that uses the same label under the parent element, equivalent to: Nth-last-of-type (1)
40.	E: Only-Child	Matches only one child element under the parent element, which is equivalent to: First-child: Last-child or: Nth-Child (1): Nth-last-Child (1)
41.	E: only-of-type	Match the unique sub-element that uses the same label under the parent element, which is equivalent to: First-of-type: Last-of-type or: Nth-of-type (1 ): nth-last-of-type (1)
42.	E: empty	Match an element that does not contain any child element. Note that text nodes are also considered as child elements.

Instance:

P: Nth-child (3) {color: # f00 ;}

P: Nth-child (ODD) {color: # f00 ;}

P: Nth-child (even) {color: # f00 ;}

P: Nth-child (3N + 0) {color: # f00 ;}

P: Nth-child (3N) {color: # f00 ;}

TR: Nth-child (2n + 11) {Background: # ff0 ;}

TR: Nth-last-child (2) {Background: # ff0 ;}

P: Last-child {Background: # ff0 ;}

P: Only-Child {Background: # ff0 ;}

P: Empty {Background: # ff0 ;}

10. Reverse Selection of pseudo classes in CSS 3

Serial number	Selector	Description
43.	E: Not (s)	Matches any element that does not match the current selector.

Instance:

: Not (p) {border: 1px solid # CCC ;}

11. Target pseudo class in CSS 3

Serial number	Selector	Description
44.	E: Target	Matching the effect of clicking "ID" in the document

Please refer to the detailed explanation and examples of this selector on HTML dog.

(End)