Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to choose several css3 selectors". In daily operation, I believe many people have doubts about how to choose css3 selectors. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to choose css3 selectors". Next, please follow the editor to study!

Method: 1, the use of "parent element: nth-child (n)" selector, the selector will select the nth child element of the parent element, and the element type is not limited; 2, the use of "parent element: nth-of-type (n)" selector, the selector will also select the nth child element of the parent element, but only select sibling elements.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to choose the first css3 selector

1. Nth-child (n)

The nth-child (n) selector matches the nth child element of the parent element, and there is no restriction on the element type.

N can be a number, a keyword, or a formula.

Examples are as follows:

123 p:nth-child (3) {background:#ff0000;} This is a heading

The first paragraph.

The second paragraph.

The third paragraph.

Note: Internet Explorer 8 and and earlier browsers: nth-child () selector.

Output result:

2. Nth-of-type (n)

The nth-of-type (n) selector matches the nth sibling element of the same type.

N can be a number, a keyword, or a formula.

Examples are as follows:

123 p:nth-of-type (3) {background:#ff0000;} This is a heading

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Output result:

At this point, the study of "how to choose a few css3 selectors" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.