代码基本选择器
实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
