IE9 or later applies to property selectors

Input [value] {color:pink} // Select only type=text input[type=text] {color:pink; Div [class^=icon] {color:red; } section[class$=data] {color: blue; }Copy the code

2. Structure pseudo-class selector

//1, select the first child in ul li ul li:first child {background-color: pink; } ul li:nth-child(2) {background-color: pink; } ul li:nth-child(even) {background-color:grey; Nth-child (n) {beckground-color:pink; // Nth-child (n) {beckground-color:pink; Nth-child (2n) {beckground-color:pink; // Nth-child (2n); Nth-child (2n+1) {beckground-color:pink; // Nth-child (2n+1); }Copy the code



Difference between nTH-of-type and nth-Child

Nth-child (1) :nth-child(1) :nth-child(1) :nth-child(1) :nth-child Nth-child (1) {background-color:blue} section div:nth-child(1) {background-color:blue} section div:nth-child(1) {background-color:blue} Section div:nth-of-type(1) {background-color:blue; Part} HTML < section > < p > strong baldheaded < / p > < div > bear big < / div > < div > bears two < / div > < / section >Copy the code

3. Pseudo-element selector

Div ::before {// Weight is 2 content: 'I '; Div ::after {content:' Peppa Pig '}Copy the code

Pseudo-element use scenarios: 1, pseudo-element font icon 2, image mask through ::before 3, pseudo-element clear float