Correction status:Uncorrected
Teacher's comments:
基础选择器代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.基本选择器</title> <style type="text/css"> /*元素选择器*/ ul { padding: 0; margin: 0; width:100%; border: 1px dashed #666; padding: 10px 5px; } li{ text-align: center; } #item1 { color: red; } .green { color: lightgreen; } #item2 ~ li { color: yellow; } </style> </head> <body><h3 align="center" padding:30px>火箭队首发阵容</h3> <ul> <li id="item1">克里斯保罗</li> <li class="green">詹姆斯哈登</li> <li class="green">阿里扎</li> <li id="item2">莱恩安德森</li> <li>卡培拉</li> </body> </html>
点击 "运行实例" 按钮查看在线实例
属性选择器代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.属性选择器</title> <style type="text/css"> /*元素选择器*/ ul { padding: 0; margin: 0; width:100%; border: 1px dashed #666; padding: 10px 5px; } li{ text-align: center; } li[class ~= "red"] { color: brown; } li[class="green"] { color: lightgreen; } </style> </head> <body><h3 align="center" padding:30px>勇士队首发阵容</h3> <ul> <li id="item1">斯蒂芬库里</li> <li class="green">克莱汤普森</li> <li class="green red">凯文杜兰特</li> <li class="red">格林</li> <li id="item2">帕楚利亚</li> </body> </html>
点击 "运行实例" 按钮查看在线实例
手抄代码: