实例
<!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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例