CSS中的nth-child()属性
目錄
first-child、last-child、nth-child、nth-last-child、nth-of-type
1.first-child
2.margin屬性解釋拓展
2.1.寫一個值
2.2. 寫兩個值
2.3.寫三個值
?2.4.寫四個值? ??
3.回歸正題，看nth-child的使用方法
3.1、li:first-child：? ? ? ?
3.2.li:last-child：? ? ? ? ? ? ?
3.3.li:nth-child(n)：? ? ? ?
3.4.li:nth-child(odd)；li:nth-child(2n+1)? ? ? ?
3.5.?li:nth-child(even)；li:nth-child(2n) 或者li:nth-child(2n+2)?
3.6.循環使用樣式
?3.7.nth-of-type：
?3.8. nth-last-child(n)：?? ? ? ?
3.9.正方向范圍
3.10.負方向范圍
3.11.前后限制范圍
3.12.nth-child的高級用法
first-child、last-child、nth-child、nth-last-child、nth-of-type
first-child，last-child可直接使用，例如? ul? li:first-child，ul li:last-child，
但是其余的選擇都需要在后面加入()，例如ul li:nth-child(n);? ? ->選中ul元素下面第n個li元素，且n是從1開始的，這里和JavaScript中的eq()不同，eq選擇也是從第1個開始的，但是索引值是從0開始
1.first-child
<style>body {font-size: 16px; //給body的所有元素設置字體大小color: #333; //給body的所有元素設置字體顏色}*{padding: 0; //這個里面的(*)表示選中所有元素， 這里給所有元素去除默認的外邊距和內間距margin: 0;}.container {width: 1200px; //設置容器的寬度為1200px；margin: 200px auto 0; //給容器設置外邊距： 上邊距為200px，左右居中，下邊距為0，}li {list-style: none; //去除li標簽默認的圓點樣式，如需要保留可將none改為desc；}.container ul li {margin-bottom: 10px;} </style>2.margin屬性解釋拓展
此處做一下margin的拓展：margin后面最少可以寫一個值，最多四個，padding和這一樣
2.1.寫一個值
上間距、下間距、左間距、右間距均為這個值
例如：margin: 100px；?
2.2. 寫兩個值
第一個代表上間距和下間距，第二個代表左間距和右間距
例如：margin: 100px? 200px；?
2.3.寫三個值
第一個代表上間距，第二個代表左間距和右間距，第三個代表下間距
例如：margin:? 100px? ?200px? ?300px；
?2.4.寫四個值? ??
第一個代表上間距，第二個代表右間距，第三個代表下間距，第四個代表左間距，按照順時針方向，可簡稱為上右下左
?
3.回歸正題，看nth-child的使用方法
3.1、li:first-child：? ? ? ?
表示選擇的是第一個?
例如
.container ul li:first-child {background: red; }?
3.2.li:last-child：? ? ? ? ? ? ?
表示選擇的是最后一個
.container ul li:last-child {background: red; }?
3.3.li:nth-child(n)：? ? ? ?
表示選擇的第n個
例如
.container ul li:nth-child(3) {background: red; }?3.4.li:nth-child(odd)；li:nth-child(2n+1)? ? ? ?
表示選中的是奇數
例如
.container ul li:nth-child(odd) {background: red; }?
.container ul li:nth-child(2n+1) {background: red; }3.5.?li:nth-child(even)；li:nth-child(2n) 或者li:nth-child(2n+2)?
表示選中的是偶數
例如
.container ul li:nth-child(even) {background: red; } .container ul li:nth-child(2n) {background: red; }3.6.循環使用樣式
li:nth-child(3n+1)? ? ?
每隔3個使用這個樣式，(3n+1)也可理解為每3個分為一組，這一組中的第一個使用這個樣式
.container ul li:nth-child(3n+1) {background: red; }3.7.nth-of-type：
只針對同類型的元素進行計算使用
例如
.container ul li:nth-of-type(3n+1) {background: red; }?這里我們可以看到只是選中了li標簽，并沒有選中p標簽；但是如果使用nth-child()的話，就會從第一個p標簽開始進行匹配，而不是第一個li標簽，此時第一個li標簽成為了第6個，而且如果是p:nth-child(1)的話，樣式也不會生效；此時要寫的是li:nth-child(6)；
.container ul li:nth-child(6) {background: red; }?
?3.8. nth-last-child(n)：?? ? ? ?
表示選擇的是倒數第n個
.container ul li:nth-last-child(3) {background: red; }3.9.正方向范圍
li:nth-child(n+3)? ? ? ? 從第3個開始使用這個樣式
.container ul li:nth-child(n+3) {background: red; }?
3.10.負方向范圍
li:nth-child(-n+3)? ? ? ? 從第3個開始向前面數
.container ul li:nth-child(-n+3) {background: red; }3.11.前后限制范圍
li:nth-child(n+4):nth-child(-n+8)????????選中第4-8個子元素。使用?nth-child(n+4):nth-child(-n+8)?我們可以選中某一范圍內子元素
.container ul li:nth-child(n+4):nth-child(-n+8) {background: red; }3.12.nth-child的高級用法
li:nth-child(n+2):nth-child(odd):nth-child(-n+9)? ?選中的子元素是從第2位到第9位，并且只包含奇數位
.container ul li:nth-child(n+2):nth-child(odd):nth-child(-n+9) {background: red; }3.13.li:nth-last-child(-n+3)：? ? ? ?
表示選擇的最后3個
例如
.container ul li:nth-last-child(-n+3) {background: red; }關于nth-child()的使用方法就寫到這里了，如果覺得本文寫的不錯的話，請您關注，點贊，評論哦！！！
點擊這里，這是我在CSDN上面的倉庫，不定期的會更新一些小練習，歡迎大家一起交流，學習，點個star哦
總結
以上是生活随笔為你收集整理的CSS中的nth-child()属性的全部內容，希望文章能夠幫你解決所遇到的問題。
