一、介紹
選擇位置的方法有兩種
1. child：first-child、last-child、nth-child
2. of-type：first-of-type、last-of-type、nth-of-type
二、程式語法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>child與of-type指定位置</title>
<style type="text/css">
/*第一*/
#t1 tr:first-child{
background-color: aqua;
}
/*最後*/
#t1 tr:last-child{
background-color: red;
}
/*選擇第三個*/
#t1 tr:nth-child(3){
background-color: khaki;
}
/*單數*/
#t2 tr:nth-child(odd){
background-color: hotpink;
}
/*雙數*/
#t2 tr:nth-child(even){
background-color: pink;
}
/*計算顯示的方法*/
#t3 tr:nth-child(3n-1){/* 3 乘 n 減 1 */
background-color: brown;
}
#t3 tr:nth-child(3n){/* 3 乘 n */
background-color: lawngreen;
}
/*雙數且不選擇第六個*/
#t4 tr:nth-child(even):not(:nth-child(6)){
background-color: pink;
}
/*選擇第幾個元素*/
#t5 tr:nth-of-type(2) {
background-color: darkgreen;
}
/*算數*/
#t5 tr:nth-of-type(2n+1) {
background-color: salmon;
}
/*第一個*/
#t5 tr:first-of-type {
background-color: cornflowerblue;
}
/*最後一個*/
#t5 tr:last-of-type {
background-color: hotpink;
}
/*單數*/
#t6 tr:nth-of-type(odd) {
background-color: yellow;
}
/*雙數*/
#t6 tr:nth-of-type(even) {
background-color:aquamarine;
}
/*單數且不選擇第三個*/
#t7 tr:nth-of-type(odd):not(:nth-of-type(3)) {
background-color: burlywood;
}
</style>
</head>
<body>
<p>一、第一、最後、選擇第幾個</p>
<table id="t1" name="t1" width="80%" border="1" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td>第一行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第二行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第三行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第四行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第五行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第六行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第七行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第八行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第九行</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p>二、單數、雙數</p>
<table id="t2" name="t2" width="80%" border="1" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td>第一行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第二行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第三行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第四行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第五行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第六行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第七行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第八行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第九行</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p>三、計算顯示方法</p>
<table id="t3" name="t3" width="80%" border="1" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td>第一行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第二行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第三行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第四行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第五行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第六行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第七行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第八行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第九行</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p>四、雙數加不選擇第六個</p>
<table id="t4" name="t4" width="80%" border="1" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td>第一行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第二行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第三行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第四行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第五行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第六行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第七行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第八行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第九行</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p>五、選擇、計算顯示方法、第一個、最後一個</p>
<table id="t5" name="t5" width="80%" border="1" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td>第一行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第二行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第三行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第四行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第五行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第六行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第七行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第八行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第九行</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p>六、</p>
<table id="t6" name="t6" width="80%" border="1" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td>第一行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第二行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第三行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第四行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第五行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第六行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第七行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第八行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第九行</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p>七、單數且不選擇第三個</p>
<table id="t7" name="t7" width="80%" border="1" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td>第一行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第二行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第三行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第四行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第五行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第六行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第七行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第八行</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>第九行</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
留言列表
程式語法 (11)
