First, the new CSS selector:
1. E[att ^ = "Val"] match has the att attribute and begins with the value Val.
Example:
<style>
Div[class^= "a"]{
Color:blue;
}
</style>
<div>
<div class= "A1" > Test Data a1</div>
<div class= "A2" > Test Data a2</div>
<div class= "B2" > Test Data b2</div>
<div class= "B1" > Test Data b1</div>
<div class= "C1" > Test data c1</div>
<div class= "C2" > Test data c2</div>
<div class= "C3" > Test Data c3</div>
</div>
2, E[att $ = "Val"] match has the att attribute and ends with a value of Val. Example:
<style>
div[class$= "3"]{
Color:blue;
}
</style>
<div>
<div class= "A1" > Test Data a1</div>
<div class= "A2" > Test Data a2</div>
<div class= "B2" > Test Data b2</div>
<div class= "B1" > Test Data b1</div>
<div class= "C1" > Test data c1</div>
<div class= "C2" > Test data c2</div>
<div class= "C3" > Test Data c3</div>
</div>
3. E[att * = "Val"] match has the ATT attribute, which contains Val.
4, E[att = "Val"] match has the att attribute, equal to Val.
Second, structural pseudo-class
1, E:nth-child (n) matches the nth child element E in the parent element
Example:
P:nth-child (2) {
color:red;
}
<div>
<p> test Data </p>
<p> test Data </p>
<p> test Data </p>
<p> test Data </p>
<p> test Data </p>
<p> test Data </p>
</div>
2, E:nth-last-child (n) matches the nth child element E in the parent element
3. E:nth-of-type (n) matches nth sibling element E in the same type
4, E:nth-last-of-type (n) matches the nth-nth sibling of the same type E
5. E:last-child matches the last element in the parent element E
6. E:first-of-type matches the first element in a parent element E
7. E:only-child matches the unique child element in the parent element E
8. E:only-of-type matches the only sibling element in the same type E
9. E:empty matches elements without any child elements E
Element status Selector 1, e:checked (selected) when the re-first box is selected
Example: Input:checked + span::after{
Content: "Testing";
Display:block;
width:100px;
height:30px;
Color:blue;
background-color:red;
}
<div style= "height:400px;width:600px;border:1px solid Blue" >
<input type= "checkbox"/>
<span> Welcome! </span>
</div>
2, e:enabled (available)
3, e:disabled (not available)
4. E::selection (selected) when text is selected
Example: span::selection{
color:red;
Background-color:blue;
}
<span> test data test data test data test results Data test data test Data </span>; Quad Filter selector E:not (s) filter S, negation pseudo class selector
V. Target pseudo-class selector e:target change by jumping (available id/name)
Six, the adjacent selector e+e{} The 1th one does not change, adjacent to the subsequent changes
Seven, brother selector e~e{...} The 1th one does not change, the back changes completely.
Example: p~p{
color:red;
}
<p> test Data </p>
<p> test Data </p>
<p> test Data </p>
CSS Selector induction
