CSS selector summary, css Selector

CSS selector summary, css Selector

Selector priority instance
ID picker 100
Class selector 10
Pseudo-class selector 10: link: visited: focus: hover: actived: lang
The UI element status pseudo Class E: enabled {} matches the available eElements in all user interfaces (form forms ).
E: disabled {} matches all the eElements that are unavailable in the form.
E: checked {} matches all the selected eElements in the form.
Structural pseudo-Class E: first-child {} matches the first Eelement in the parent Element
E: last-child {} matches the last Eelement in the parent Element
E: nth-child (n) {} matches the nth child element E
E: nth-last-child (n) {} matches the nth child element E
E: nth-of-type (n) {} matches the nth sibling Element E of the same type
E: nth-last-of-type (n) {} matches the nth sibling Element E in the same type
E: first-of-type {} matches the first Eelement In the sibling Element
E: only-child {} matches E that belongs to the unique child element of the parent element.
E: only-of-type {} matches E that belongs to the unique sibling element of the same type.
E: root {} is not commonly used to match the root element of a document. In HTML, the root element is always HTML
E: empty {} is not commonly used to match element E without any child elements (including text nodes ).
Negative pseudo-class p: not (s) {} matches all elements that do not match the simple selector s p
The target pseudo class is not commonly used.
Attribute selector 10
Simple attribute selector h1 [foo] {color: red ;}
Specific attribute value selector h1 [foo = "sun"] {color: red;} select the foo attribute value as all h1 elements of sun
Substring matching attribute selector h1 [foo * = "sun"] {color: red;} select all h1 elements whose values start with sun
H1 [foo ^ = "sun"] {color: red;} select all h1 elements whose values end with sun
H1 [foo $ = "sun"] {color: red;} select the foo attribute value that contains all the h1 elements of sun.
Element selector 1
Child element selector h1> span {color: red ;}
Adjacent sibling element selector h1 + h1 {font-size: 20px ;}
Sibling element selector h1 ~ H1 {font-size: 20px ;}
Pseudo element selector 1 p: first-letter {} set the first letter style of Section p
P: first-line {} set the first line style of Section p
P: before {} p: after {}
P: selection {} sets the style of the selected part.