Css learning selector: nth-child (n)

Css learning selector: nth-child (n)

Today, I learned a new small effect. For example, when a website changes the color of a line, for example, a black line or a white line, the zebra will show up. When you touch a line with your mouse, color background changes, especially when you connect to the database, simple code is very important.

At this time, an interesting friend appeared: nth-child (n) was always saying "look for me ", this means that the selector matches the nth child element of its parent element, starting from 0. For example, p: nth-child (2) indicates the p element whose subscript is 2, which is 3rd elements; if you want to implement different parity rows, you can directly use odd for odd numbers and even for even numbers, which is convenient. If you use (2n + 1) and (2n), it is OK;

 

. History-content: nth-child (2n + 1) {background: # D8F0E7 ;}. history-content: nth-child (2n) {background: # eee ;}. history-content: hover {background: # fff ;}

The effect is the same as the following:

 

 

. History-content: nth-child (odd) {background: # D8F0E7 ;}. history-content: nth-child (even) {background: # eee ;}. history-content: hover {background: # fff ;}

The final effect is as follows: one line is gray, one line is green, and the touch is white.