Correction status:Uncorrected
Teacher's comments:
代码基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style type="text/css"> #name { background-color: red; } #sex {background-color: black;} .xq { background-color:yellow; } table *{ background-color:lightgreen; color: white;} tr th { color: green; } #sex+td { background-color:blue; } #sex~td { background-color:blue; } </style> </head> <body> <table border="0" cellspacing="0" cellpadding="5" align="center" width="60%"> <tr> <th id="name">姓名</th> <th id="sex">性别</th> <th class="age">年龄</th> <th class="xq">兴趣</th> </tr> <tr><td colspan="4"><hr></td></tr> <tr> <td id="name">张三</td> <td id="sex">男</td> <td class="age">21</td> <td class="xq">打篮球</td> </tr> <tr><td colspan="4"><hr></td></tr> <tr> <td id="name">李四</td> <td id="sex">男</td> <td class="age">23</td> <td class="xq">羽毛球</td> </tr> <tr><td colspan="4"><hr></td></tr> <tr> <td id="name">张漂亮</td> <td id="sex">女</td> <td class="age">21</td> <td class="xq">打排球</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
代码属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> *[id] {background-color: red;} tr [ class="age"] {background-color: blue;} tr [ class~="sex"] {background-color: green;} tr [ class^="xq"] {background-color: skyblue;} tr [ class^="xq"] {background-color: skyblue;} tr [ class$="y"] {background-color: #00EE76;} tr [ class*="j"] {background-color: #B22222;} </style> </head> <body> <table border="0" cellspacing="0" cellpadding="5" align="center" width="60%"> <tr align="center"> <th id="name">姓名</th> <th class="sex">性别</th> <th class="age">年龄</th> <th class="xq">兴趣</th> <th class="zy">职业</th> </tr > <tr><td colspan="5"><hr></td></tr> <tr align="center"> <td id="name">james</td> <td class="sex">男</td> <td class="age">32</td> <td class="james">打篮球</td> <td class="zy">篮球运动员</td> </tr> <tr><td colspan="5"><hr></td></tr> <tr align="center"> <td id="name">李四</td> <td class="sex">男</td> <td class="age">23</td> <td class="xq">羽毛球</td> <td class="zy">学生</td> </tr> <tr><td colspan="5"><hr></td></tr> <tr align="center"> <td id="name">张漂亮</td> <td class="sex">女</td> <td class="age">21</td> <td class="xq">打排球</td> <td class="zy">学生</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例