首頁 網頁資源RESOURCES CSS
nth-child選擇器,CSS怎麼選擇元素整合攻略

nth-child選擇器,CSS怎麼選擇元素整合攻略

2021.09.17
CSS nth-child 選擇器
:nth-child(2)
選擇第2個
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex1">
    <div class="shape-ex1-cube">1</div>
    <div class="shape-ex1-cube">2</div>
    <div class="shape-ex1-cube">3</div>
    <div class="shape-ex1-cube">4</div>
    <div class="shape-ex1-cube">5</div>
    <div class="shape-ex1-cube">6</div>
</div>
CSS
複製已複製
.shape-ex1{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex1-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex1-cube:nth-child(2){
    background-color: #888;
}
:nth-child(n)
選擇第n個,n會從0往上遞增,例: 0、1、2
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex2">
    <div class="shape-ex2-cube">1</div>
    <div class="shape-ex2-cube">2</div>
    <div class="shape-ex2-cube">3</div>
    <div class="shape-ex2-cube">4</div>
    <div class="shape-ex2-cube">5</div>
    <div class="shape-ex2-cube">6</div>
</div>
CSS
複製已複製
.shape-ex2{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex2-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex2-cube:nth-child(n){
    background-color: #888;
}
:nth-child(n + 2)
選擇第n + 2個,n會從0往上遞增,例: 0+2、1+2、2+2
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex3">
    <div class="shape-ex3-cube">1</div>
    <div class="shape-ex3-cube">2</div>
    <div class="shape-ex3-cube">3</div>
    <div class="shape-ex3-cube">4</div>
    <div class="shape-ex3-cube">5</div>
    <div class="shape-ex3-cube">6</div>
</div>
CSS
複製已複製
.shape-ex3{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex3-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex3-cube:nth-child(n + 2){
    background-color: #888;
}
:nth-child(2n)
選擇第n + 2個,n會從0往上遞增,例: 2×0、2×1、2×2
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex4">
    <div class="shape-ex4-cube">1</div>
    <div class="shape-ex4-cube">2</div>
    <div class="shape-ex4-cube">3</div>
    <div class="shape-ex4-cube">4</div>
    <div class="shape-ex4-cube">5</div>
    <div class="shape-ex4-cube">6</div>
</div>
CSS
複製已複製
.shape-ex4{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex4-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex4-cube:nth-child(n + 2){
    background-color: #888;
}
:nth-child(2n + 1)
選擇第2n + 2個,n會從0往上遞增,例: 0×2+1、1×2+1、2×2+1
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex5">
    <div class="shape-ex5-cube">1</div>
    <div class="shape-ex5-cube">2</div>
    <div class="shape-ex5-cube">3</div>
    <div class="shape-ex5-cube">4</div>
    <div class="shape-ex5-cube">5</div>
    <div class="shape-ex5-cube">6</div>
</div>
CSS
複製已複製
.shape-ex5{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex5-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex5-cube:nth-child(2n + 2){
    background-color: #888;
}
:nth-child(-n + 2)
選擇第-n + 3個,n會從0往上遞增,常用來選擇前面某幾個,例: -0+2、-1+2、-2+2
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex6">
    <div class="shape-ex6-cube">1</div>
    <div class="shape-ex6-cube">2</div>
    <div class="shape-ex6-cube">3</div>
    <div class="shape-ex6-cube">4</div>
    <div class="shape-ex6-cube">5</div>
    <div class="shape-ex6-cube">6</div>
</div>
CSS
複製已複製
.shape-ex6{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex6-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex6-cube:nth-child(-n + 2){
    background-color: #888;
}
:nth-child(n + 2):nth-child(-n + 4)
選擇第n + 2個到第-n + 4個,n會從0往上遞增,常用來選擇第幾個到第幾個區間
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex7">
    <div class="shape-ex7-cube">1</div>
    <div class="shape-ex7-cube">2</div>
    <div class="shape-ex7-cube">3</div>
    <div class="shape-ex7-cube">4</div>
    <div class="shape-ex7-cube">5</div>
    <div class="shape-ex7-cube">6</div>
</div>
CSS
複製已複製
.shape-ex7{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex7-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex7-cube:nth-child(n + 2):nth-child(-n + 4){
    background-color: #000;
}
:nth-child(odd)
選擇奇數
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex8">
    <div class="shape-ex8-cube">1</div>
    <div class="shape-ex8-cube">2</div>
    <div class="shape-ex8-cube">3</div>
    <div class="shape-ex8-cube">4</div>
    <div class="shape-ex8-cube">5</div>
    <div class="shape-ex8-cube">6</div>
</div>
CSS
複製已複製
.shape-ex8{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex8-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex8-cube:nth-child(even){
    background-color: #000;
}
:nth-child(even)
選擇偶數
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex9">
    <div class="shape-ex9-cube">1</div>
    <div class="shape-ex9-cube">2</div>
    <div class="shape-ex9-cube">3</div>
    <div class="shape-ex9-cube">4</div>
    <div class="shape-ex9-cube">5</div>
    <div class="shape-ex9-cube">6</div>
</div>
CSS
複製已複製
.shape-ex9{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex9-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex9-cube:nth-child(even){
    background-color: #000;
}
:first-child
選擇第一個
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex10">
    <div class="shape-ex10-cube">1</div>
    <div class="shape-ex10-cube">2</div>
    <div class="shape-ex10-cube">3</div>
    <div class="shape-ex10-cube">4</div>
    <div class="shape-ex10-cube">5</div>
    <div class="shape-ex10-cube">6</div>
</div>
CSS
複製已複製
.shape-ex10{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex10-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #000;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex10-cube:first-child{
    background-color: #000;
}
:last-child
選擇最後一個
展示
1
2
3
4
5
6
HTML
複製已複製
<div class="shape-ex11">
    <div class="shape-ex11-cube">1</div>
    <div class="shape-ex11-cube">2</div>
    <div class="shape-ex11-cube">3</div>
    <div class="shape-ex11-cube">4</div>
    <div class="shape-ex11-cube">5</div>
    <div class="shape-ex11-cube">6</div>
</div>
CSS
複製已複製
.shape-ex11{
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
}
.shape-ex11-cube{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    background-color: #888;
    box-sizing: border-box;
    margin: 5px 5px;
}
.shape-ex11-cube:last-child{
    background-color: #000;
}
其他類別