收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<style>
.box{ width: 400px; height: 700px; background: skyblue; color: #000000; padding: 0; margin: 0;}
.box>li{ width: 120px; height: 120px; float: left; border-radius: 60px; background: #e3e3e3; list-style: none; text-align: center; line-height: 120px; margin:10px 0 0 10px}
.xlxzq + li{ background: firebrick;}
.hdxzq ~ li { background: tan;}
li:first-child{ background: yellowgreen;}
li:last-child{ background: hotpink;}
</style>
</head>
<body>
<ul class="box">
<li>第一个孩子</li>
<li>2</li>
<li>3</li>
<li class="xlxzq">相邻选择器</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="hdxzq">后代选择器</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>最后一个孩子</li>
</ul>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
