<!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><p>aaaa</p><p>bbbb</p><p>cccc</p></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 >p:nth-of-type(2){background-color: lightblue;}.list :first-of-type{background-color: lightblue;}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
