<!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>