Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>毫无美感的html</title> <style> li{ color:red; } ul li{ list-style: none; } #id1{ color: yellow; } .class1{ color: blue; } ul *{ border: 1px solid #dcdcdc; } li>em{ background-color: red; } #id1 + li{ background-color: #776655; } #id1 ~ li{ width: 300px; } [id]{ width:500px; } [id=id1]{ height: 50px; } [class ~= class2]{ height: 150px; } [class ^= cla]{ /*以cla开头的class属性的值*/ } [class $= ss3]{ /*以ss3结尾的class属性的值*/ } [class *= ss1]{ /*class属性的值中包含ss1的*/ } </style> </head> <body> <ul> <li class="class1 class3">床前<em>明月</em>光</li> <li id="id1">疑是地上霜</li> <li class="class1 class2">举头望明月</li> <li class="class2">低头思故乡</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
手写代码: