Learn CSS

Time:2022-6-11

1. :nth-child(n)

Chestnuts:

Specifies the background color of each P belonging to the second child element of its parent element:

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>This is the title</h1>
<p>First paragraph</ p>
<p>Second paragraph</ p>
<p>The third paragraph</ p>
<p>The fourth paragraph</ p>

<p><b>Note: </b>internet Explorer does not support: nth child() selectors</ p>

</body>
</html>

effect
Learn CSS

p:nth-child(2)N indicates the nth element of the parent element. Even if the previous element of P is not a P element, count from the first element of the parent element.

Summary:
N start from 1
N can be a number, a keyword, or a formula.

CSS3: nth child() selector

2. Z-index also has pits

You may have been mistaken about Z-index