Home > Developer > JavaScript
Css3 uses the structure pseudo-class selector and css3 structure Selector
I recently saw a usage of the structure pseudo-class selector on a foreign website and thought it was very practical. I tried it myself and recorded it:
This is the most basic style:
1 <style type="text/css"> 2 li{ 3 list-style-type: none; 4 float: left; 5 width: 60px; 6 height: 60px; 7 background-color: #979698; 8 margin-left: 10px; 9 text-align: center;10 line-height: 60px;11 border-radius: 50%;13 }14 </style>
Body content:
1 <body> 2 <ul> 3 <li> 01st </li> 4 <li> 02nd </li> 5 <li> 03rd </li> 6 <li> 04th </li> 7 <li> 05th </li> 8 <li> 06th </li> 9 <li> 07th </li> 10 <li> 08th </li> 11 <li> 09th </li> 12 <li> 10th </li> 13 <li> 11th </li> 14 </ul> 15 </body>
The first is the usage of the most basic structure pseudo-class selector:
1 li:nth-child(8){2 background-color: #298EB2;4 }
The result is as follows:
Use: nth-child (n + 6) equivalent to: nth-child (6) and above li tag elements:
1 li:nth-child(n+6){2 background-color: #298EB2;4 }
The result is as follows:
Likewise, nth-child (-n + 6) is equivalent to nth-child (6) and the following li tag elements:
1 li:nth-child(-n+6){2 background-color: #298EB2;4 }
The result is as follows:
Based on the above principles, we can come to some advanced ones:
For example, you can use nth-child (n + 4): nth-child (-n + 8) to obtain nth-child (4) and above and nth-child (8) and the following li tag elements:
1 li:nth-child(n+4):nth-child(-n+8){2 background-color: #298EB2;3 }
The result is as follows:
You can also use: nth-child (n + 2): nth-child (odd): nth-child (-n + 8) to obtain: nth-child (n + 2) to: the singular li Tag Element Between nth-child (-n + 8:
1 li:nth-child(n+2):nth-child(odd):nth-child(-n+8){2 background-color: #298EB2;3 }
The result is as follows:
Finally, we can use nth-child (3n + 1) to obtain an even number of li tag elements in numbers 1, 4, 7, and 10:
1 li:nth-child(3n+1):nth-child(even){2 background-color: #298EB2;3 }
The result is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
