nth 元素選擇當我們要一組 class 同名，或者連續的一組元素的其中一個，或者某種規律的元素添加單獨樣式的時候，不妨看看這類的元素選擇器。 1. 官方定義
2. 解釋nth-child(n)、 nth-last-child(n) 、nth-of-type(n) 都是用來匹配父元素內部子元素的。不過也有些區別： 3. 語法.item:nth-child(2n+1){
}
.item:nth-of-type(n){
}
.item:nth-last-child(2n){
}
n 從 開始計數的正整數。4. 兼容性
5. 實例選擇 demo 內第 3 個子元素背景為紅色。
.item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-child(3){
background: red;
}效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-child(3){
background: red;
}
</style>
</head>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
.item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-last-child(2){
background: red;
}效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-last-child(2){
background: red;
}
</style>
</head>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
.item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-of-type(3){
background: red;
}效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-of-type(3){
background: red;
}
</style>
</head>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>6. 經驗分享
<div class="demo"> <p class="item">我是 p 標簽</p> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <div class="demo"> <p class="item-2">我是 p 標簽</p> <div class="item-2">1</div> <div class="item-2">2</div> <div class="item-2">3</div> <div class="item-2">4</div> </div> .demo{
float: left;
}
.item,.item-2{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-of-type(3){
background: red;
}
.item-2:nth-child(3){
background: red;
}效果圖
通過效果圖我們就清楚的明白他們的差異了。 <!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
float: left;
}
.item,.item-2{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-of-type(3){
background: red;
}
.item-2:nth-child(3){
background: red;
}
</style>
</head>
<body>
<div class="demo">
<p class="item">我是 p 標簽</p>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="demo">
<p class="item-2">我是 p 標簽</p>
<div class="item-2">1</div>
<div class="item-2">2</div>
<div class="item-2">3</div>
<div class="item-2">4</div>
</div>
</body>
</html>下面是讓所有偶數的背景變紅。 .item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-of-type(2n){
background: red;
}效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
width: px;
height: px;
text-align: center;
line-height: px;
border: px solid #ccc;
background: #f2f2f2;
}
.item:nth-of-type(2n){
background: red;
}
</style>
</head>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
|
