Correction status:qualified
Teacher's comments:作业已检查!
完成的不错!大赞!!
这一节课学习了很多css选择器的知识。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.21作业</title> <style type="text/css"> /*元素选择器(标签选择器)*/ li { list-style:none; float:left; padding:10px; } /*id选择器*/ #li-1 { background-color:skyblue; } /*类选择器*/ .li-2 { background-color:yellow; } /*通配选择器*/ div *{ background-color: cyan; } /*父子选择器*/ div ul li img { border:1px solid red; } /*子类选择器*/ li > img{ width:50px;} } /*相邻兄弟选择器*/ .li-2 + li { background-color:blue; } /*全部兄弟选择器*/ #li-3 ~ li { border:2px solid blue; } </style> </head> <body> <div> <ul> <li id="li-1"><img src="../images/11.jpg" ></li> <li class="li-2"><img src="../images/12.jpg" ></li> <li><img src="../images/13.jpg" ></li> </ul> </div> <div> <li id="li-3"><img src="../images/14.jpg" ></li> <li><img src="../images/15.jpg" ></li> <li><img src="../images/12.jpg" ></li> <li><img src="../images/13.jpg" ></li> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例