Introduction to the new Css selector and pseudo-class added to HTML5

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.

p[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