A detailed description of all CSS selectors

----------------------------------------
CSS Selector
----------------------------------------

1, combination selector:
1) e>f: direct descendant selector.
2) E+f: Sibling element selector, matching the sibling element F immediately following the E element.
3) E~f: matches any of the sibling F elements after the E element.
4) E F: descendant selector.
5) E,f: Group selector.
cation:+ and ~ differences, + can only match one sibling element immediately following it; ~ matches all sibling elements immediately followed

2, Property selector:
1) E[att] matches all e elements with the ATT attribute;
2) E[att=val] matches the e element of all att=val;
3) E[att~=val] matches all ATT attributes with multiple space-delimited values, where one value equals "Val" of the E element;
Case
<p data= "Mars Vic" >sssssssssss</p>
P[data~= ' Vic ']{background-color:maroon;
4) E[att|=val] matches all ATT attributes with multiple hyphen-delimited (hyphenseparated) values, one of the e elements with a value beginning with "Val", mainly for the lang attribute, such as "en", "en-us", "EN-GB", and so on;
Case
<p data= "Vic-dd" lang= "En-aa" >bbbbbbbbbbb</p>
p[lang|= ' en ']{background-color:yellow;}
5) E[att^=val] attribute the value of the att with the element beginning with "Val";
Case
<p data= "Vic-dd" lang= "En-aa" >bbbbbbbbbbb</p>
P[data^= ' Vic ']{background-color:blue};
6) E[att$=val] attribute the value of the att to the element ending with "Val";
Case
<p data= "Ccvic" >aaaaaaaaaaa</p>
P[data$= ' Vic ']{background-color:red};
7) E[att*=val]
Case
<p data= "Cc-vic" >aaaaaaaaaaa</p>
<p data= "Vic-dd" lang= "En-aa" >bbbbbbbbbbb</p>
<p data= "Divvictor" >cccccccccc</p>
<p data= "Mars Vic" >sssssssssss</p>
P[data*= ' Vic ']{background-color:red};

3, Pseudo-class selector:
<ul>
<li>find</li>
<li>mars</li>
<li>selena</li>
<li>victor</li>
<li>pink</li>
</ul>
1) First-child: Matches the first child element of a parent element;
UL li:first-child{color:red;}
2) Link: Match all the links that have not been clicked;
3) visited: matches all clicked links
4) Active: matches the E element on which the mouse has been pressed and not released
5) Hover: match the E element on which the mouse hovers;
<a href= "#" ></a>
A{text-decoration:none}
A:link{color:green;}
A:visited{color:maroon;}
a:active{color:red;}
A:hover{color:blue;}
6) Focus: matches the E element that obtains the current focus;
<input type= "Text" >
Input[type= ' text ']:focus{outline:1px solid yellow;}
------------------------------------------------------------------------
7) Lang (): matches the E element of the lang attribute equal to C;
<q>this is a quote quoting Steve Jobs saying <q>design are not just what it looks like and feels like. Design is what it works.</q> for inspiration. </q>

Q:before {
Content:open-quote;
}

Q:after {
Content:close-quote;

/* 中文版 Quotes */
: lang (en) q {
Quotes: ' \201c ' \201d ' \2018 ' \2019 '; /* Unicode values is used to specify special quote characters. */
}

/* French Quotes */
: lang (FR) Q {
Quotes: ' «'» ' ‹ ' › ';
}

/* German Quotes */
: lang (DE) Q {
Quotes: '» ' «' ‹ ' › ';
}
---------------------------------------------------------------------------

4, for elements:
1) First-line: The first line of the matching element;
2) First-letter: matches the first letter of the element;
3) Before: Insert the generated content before the e element;
4) After: Inserts the generated content after the e element;

5, the pseudo-class related to the user interface;
1) Enabled: matches the active element in the form
2) Disabled: match the disabled elements in the form
3) Checked: Matches the selected radio (radio box) or checkbox (checkbox) element in the form
4) Selection: Matches the element currently selected by the user: This pseudo element can be applied to color, background-color, background (background-color part), and Text-shadow.
Case
P::selection{color:yellow;}

Structural pseudo-class in 6,CSS3;
1) Root: matches the root element of the document, for the HTML document, is the HTML element;
2) Nth-child (n): matches the nth child element of its parent element, the first number is 1;
3) Nth-last-child (n): Similar to: Nth-child (), but only matches elements that use the same label;
4) Nth-of-type (n): Similar to: Nth-last-child (), but only matches elements that use the same label
5) Nth-last-of-type (n): matches the last child element of the parent element, equivalent to: Nth-last-child (1)
6) Last-child
7) First-of-type
8) Last-of-type
9) Only-child
) Only-of-type
One) empty

A detailed description of all CSS selectors