<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css1.css"> <title>Document</title> </head> <body> <ul> <li> <p>1</p> </li> <li class="red">2</li> <li>3</li> <li> <p>4</p> </li> <li class="blue">5</li> <li>6</li> <li>7</li> <li>8</li> <li> <p>9</p> </li> <li>10</li> <p>3</p> <p>4</p> <p>8</p> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
li { float: left; list-style: none; width: 50px; height: 50px; border-radius: 50%; background-color: aquamarine; border: 1px #000 solid; margin-right: 10px; line-height: 50px; text-align: center } .red { background-color: #f00; } .red+* { background-color: blue; color: aliceblue } .blue~* { background-color: bisque; color: blueviolet } ul :nth-child(4) { background-color: lightcoral; font-size: 30px; } ul li:nth-of-type(8) { border: 2px lawngreen dashed } p { display: inline; } ul p:nth-of-type(3) { color: #f00; font-size: 20px; font-weight: bold; padding: 10px; }
点击 "运行实例" 按钮查看在线实例