Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "what are the new Css selectors and pseudo classes in HTML5?" in the actual case operation process, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Selector

P [name ^ = "my"] {font-size:14px}

Selector ^ = rules apply to all name attributes that start with "my"

Element label

P [name$= "my"] {font-size:14px}

Selector $= rules apply to all name attributes that end with "my"

Element label

P [name*= "my"] {font-size:14px}

Selector $= the rule applies to all name properties that contain the end of "my"

On element

Selector >, +, ~

Selector > indicates that the affected element is a child of the first element.

Selector + this selector refers to the element immediately after the element, and the two elements must have the same parent.

The selector ~ is similar to +, but the affected element does not necessarily follow the first element.

Add ":" between pseudo-class and reference element name

Example: myclass:nth-child (2)

The second element in the myclass element

Keywords "odd", "even"

Myclass:nth-child (odd): affects the odd index position of its parent element

Myclass:nth-child (even): affects the even-numbered index position of its parent element

Copy the code

The code is as follows:

.test:nth-child (odd)

{

Color:Blue

}

.test:nth-child (even)

{

Color: Red

}

.test:nth-child (2)

{

Color: Green

}

one

two

one

two

one

two

The effect is as follows:

one

two

one

two

one

two

Negative pseudo-class

: not (p) {color:red}

Except

All elements except the element are red

This is the end of the content of "what are the new Css selectors and pseudo-classes added by HTML5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.