<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器：伪类</title></head><body><!-- 伪类：1.结构伪类：根据元素位置获取元素2.状态伪类：根据状态来获取元素 --> <ul class="list"> <li class="first">item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> </ul> <style> /* .list >:first-child{ background-color: red; } */ /* .list >p:first-of-type{ background-color: yellow; } .list .first{ background-color: lightgreen; } */ /* .list >li:nth-of-type(3){ background-color: lightblue; } */ /* .list >li:nth-last-of-type(3){ background-color: lightblue; } */ .list > :nth-of-type(2n){ background-color: lightblue; } .list > :nth-of-type(2n + 1){ background-color: red; } .list > :nth-of-type(2n + 1):hover{ background-color: white; } </style></body></html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
