Comment: HTML5 has added a new Css selector and pseudo-category. This article has compiled some and gave a simple introduction to use. Friends who like html5 can refer to it. I hope it will be helpful to everyone.
Selectorp[name^=my]{font-size:14px}
Selector ^= rules are applied to all <p> element tags with name attributes starting with my
p[name$=my]{font-size:14px}
Selector $= rules apply to all name attributes ending with my <p> element tags
p[name*=my]{font-size:14px}
Selector $= rules are applied to all name attributes containing the <p> elements ending with my
Selector > , + , ~
Selector > means that the affected element is a child of the first element.
Selector + This selector refers to the element immediately following the element, and these two elements must have the same parent.
The selector ~ is similar to +, but the affected element does not necessarily follow the first element.
Add the name of the pseudo-class and the reference element:
Example: myclass:nth-child(2)
The second element in myclass element
keyword odd, even
myclass:nth-child(odd): affects the index position of its parent element with an odd number
myclass:nth-child(even): affects the index position of its parent element is even
<style>
.test:nth-child(odd)
{
color:Blue;
}
.test:nth-child(even)
{
color: Red;
}
.test:nth-child(2)
{
color: Green;
}
</style>
<div>
<p>
1
</p>
<p>
2
</p>
</div>
<p>
1
</p>
<p>
2
</p>
<p>
1
</p>
<p>
2
</p>
The effects are as follows:
1
2
1
2
1
2
Negate pseudo-classes
:not(p){color:red}
All other elements except the <p> element are red