Introduction to Css selectors and pseudo classes added to HTML5

Comments: HTML5 has added Css selectors and pseudo classes. This article has summarized some of them and provided a brief introduction. If you like html5, you can refer to them and hope to help you with the selector.
P [name ^ = "my"] {font-size: 14px}
Selector ^ = indicates that the rule is applied to <p> element labels starting with "my" for all name attributes.
P [name $ = "my"] {font-size: 14px}
Selector $ = indicates that the rule is applied to the <p> element label ending with "my" for all name attributes.
P [name * = "my"] {font-size: 14px}
Selector $ = lecture rules applied to all <p> elements whose name attributes contain "my"
Selector>, + ,~
Selector> indicates that the affected element is the child element of the first element.
Selector + This selector references the element following the element. The two elements must have the same parent level.
Selector ~ Similar to +, the affected elements do not necessarily follow the first element.

":" Must be added between the pseudo class and the referenced element name.
Example: myclass: nth-child (2)
The second element in myclass
Keyword "odd", "even"
Myclass: nth-child (odd): affects the index location of its parent element that is odd
Myclass: nth-child (even): The index location of the parent element is even

The Code is as follows:
<Style>
. Test: nth-child (odd)
{
Color: Blue;
}
. Test: nth-child (even)
{
Color: Red;
}
. Test: nth-child (2)
{
Color: Green;
}
</Style>
<Div class = "test">
<P>
1
</P>
<P>
2
</P>
</Div>
<P class = "test">
1
</P>
<P class = "test">
2
</P>
<P class = "test">
1
</P>
<P class = "test">
2
</P>

The effect is as follows:
1
2
1
2
1
2
Negative pseudo class
: Not (p) {color: red}
All elements except the <p> element are red.