How css modifies the style of the nth element

This article mainly explains "how css modifies the nth element style". The explanation in the article is simple and clear and easy to learn and understand. Please follow the editor's train of thought to study and learn "how css modifies the nth element style".

In css, you can use the ": nth-child" selector to select the nth element and modify its style, which matches the nth child element belonging to its parent element, regardless of the type of element, the syntax is ": nth-child (n) {modify content;}".

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

How does css modify the style of the nth element

In css, you can use the: nth-child (n) selector to match the Nth child element that belongs to its parent element, regardless of element type. Then modify it, n can be a number, a keyword or a formula.

Examples are as follows:

P:nth-child (2) {background:#ff0000;} this is the title

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Note: Internet Explorer does not support the: nth-child () selector.

Output result:

The above example modifies the background color of the second element, so let's take a look at it again:

Open our editor. Create a set of sequences as a demonstration. First-child is the first element. Last-child is the last element. Nth-child (3) is the third element. You can also skillfully specify even numbers.

Thank you for your reading, the above is the content of "how css modifies the nth element style". After the study of this article, I believe you have a deeper understanding of how css modifies the nth element style, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!