css3 - 選擇器first-child、last-child、nth-child、nth-last-child、nth-of-type
https://blog.csdn.net/erdouzhang/article/details/70842177
最近系統專案，遇到較多表格 和 div 需要根據 寫樣式的
1.first-child（IE7相容）、last-child（IE8不相容）
html：
<body>
<h2>列表</h2>
<ul>
<li>列表專案1</li>
<li>列表專案2</li>
<li>列表專案3</li>
<li>列表專案4</li>
</ul>
</body>
css：
<style>
ul {list-style: none;}
li:first-child {/*給第一個列表專案設定樣式 相容IE7*/
background-color: pink;
}
li:last-child { /*給最後一個列表專案設定樣式 IE8不相容*/
background-color: red;
}
</style>
解析：
一個頁面中無論有幾個ul列表，只要設定first-child、last-child，那麼所有ul列表項的第一個和最後一個列表專案都會有設定的樣式。
2.nth-child、nth-last-child （IE8不相容）
html：
<body>
<h2>列表</h2>
<ul>
<li>列表專案1</li>
<li>列表專案2</li>
<li>列表專案3</li>
<li>列表專案4</li>
<li>列表專案5</li>
<li>列表專案6</li>
</ul>
</body>
css：
<style>
ul {list-style: none;}
li:nth-child(3) { /*表示li元素中，第三個元素 IE8不相容*/
background-color: pink;
}
li:nth-last-child(2) { /*表示li元素中，倒數第二個元素 IE8不相容*/
background-color: red;
}
</style>
3.對奇數、偶數使用樣式
html:
<ul>
<li>列表專案1</li>
<li>列表專案2</li>
<li>列表專案3</li>
<li>列表專案4</li>
<li>列表專案5</li>
<li>列表專案6</li>
</ul>
css：
<style>
ul {list-style: none;}
li:nth-child(odd) {/*表示li元素中，從1開始 奇數為pink*/
background-color: pink;
}
li:nth-child(even) {/*表示li元素中，從1開始 偶數為灰色*/
background-color: #ccc;
}
</style>
解析： li:nth-child(odd)含義：li的父元素ul的兒子中，從1開始數，奇數兒子設定樣式為xxx;
當父元素為列表時，因為只有列表專案一種子元素，不會出現問題；當父元素是div時，就不止一種子元素，會引起問題。如下：
例如：設定div元素中為奇數標題h2背景顏色
html:
<div>
<h2>文章標題A</h2>
<p>我是一個小段落。。。</p>
<h2>文章標題B</h2>
<p>我是一個小段落。。。</p>
<h2>文章標題C</h2>
<p>我是一個小段落。。。</p>
<h2>文章標題D</h2>
<p>我是一個小段落。。。</p>
</div>
css:
h2:nth-child(odd) {
background-color: pink;
}
執行結果為：
解析： h2:nth-child(odd)含義是：h2的父元素div 的所有兒子中 為奇數的兒子 設定背景顏色；而不是所有h2中為偶數的h2設定樣式；
解決方法： nth-of-type可以避免則會中問題產生
4.nth-of-type（IE8不相容）：只針對同類型的元素進行計算
css:
h2:nth-of-type(odd) { /*所有h2標籤中為奇數的設定樣式*/
background-color: pink;
}
h2:nth-of-type(even) { /*所有h2標籤中為偶數的設定樣式*/
background-color: #ccc;
}
解析： h2:nth-of-type(odd)含義：在所有h2標籤中，只要是奇數h2就設定樣式；只針對h2標籤，與父元素無關；
5、迴圈使用樣式 li:nth-child(4n+1)
html：
<ul>
<li>列表專案1</li>
<li>列表專案2</li>
<li>列表專案3</li>
<li>列表專案4</li>
<li>列表專案5</li>
<li>列表專案6</li>
<li>列表專案7</li>
<li>列表專案8</li>
<li>列表專案9</li>
<li>列表專案10</li>
<li>列表專案11</li>
<li>列表專案12</li>
</ul>
css：
<style>
ul {list-style: none;}
li:nth-child(4n+1) { /*表示li元素中，4個li為一組迴圈 第一個li設定為*/
background-color: red;
}
li:nth-child(4n+2) { /*表示li元素中，4個li為一組迴圈 第二個li設定為*/
background-color: pink;
}
li:nth-child(4n+3) {
background-color: #ccc;
}
li:nth-child(4n+4) {
background-color: yellow;
}
</style>
解析：
4n含義：四個li元素為一組迴圈；
4n+1含義：這一組迴圈中，第一個樣式；
4n+2含義：這一組迴圈中，第二個樣式；
4n+3含義：這一組迴圈中，第三個樣式；
4n+4含義：這一組迴圈中，第四個樣式；