第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

如風(fēng)般魅影 · 更新于 2020-05-05

nth 元素選擇

當(dāng)我們要一組 class 同名，或者連續(xù)的一組元素的其中一個(gè)，或者某種規(guī)律的元素添加單獨(dú)樣式的時(shí)候，不妨看看這類的元素選擇器。

1. 官方定義

  • nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素；
  • nth-last-child(n) 選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素，從最后一個(gè)子元素開始計(jì)數(shù)；
  • nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素。

2. 慕課解釋

nth-child(n)、 nth-last-child(n) 、nth-of-type(n) 都是用來(lái)匹配父元素內(nèi)部子元素的。不過(guò)也有些區(qū)別：
nth-child 按照個(gè)數(shù)來(lái)算；
nth-of-type 按照類型來(lái)計(jì)算；
nth-last-child(n) 從最后一個(gè)子元素往前開始計(jì)算。

3. 語(yǔ)法

.item:nth-child(2n+1){

}
.item:nth-of-type(n){

}
.item:nth-last-child(2n){

}

n 從 0 開始計(jì)數(shù)的正整數(shù)。

4. 兼容性

IE Edge Firefox Chrome Safari Opera ios android
all all all all all all all all

5. 實(shí)例

選擇 demo 內(nèi)第 3 個(gè)子元素背景為紅色。

  1. 使用 nth-child。
.item{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 1px solid #ccc;
    background: #f2f2f2;
}
.item:nth-child(3){
    background: red;
}

效果圖：

圖片描述

第三個(gè)背景變紅效果圖
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px 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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
  1. 使用 nth-last-child。
.item{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 1px solid #ccc;
    background: #f2f2f2;
}
.item:nth-last-child(2){
    background: red;
}

效果圖
圖片描述

第三個(gè)背景變紅效果圖
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px 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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
  1. 使用nth-of-type。
.item{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 1px solid #ccc;
    background: #f2f2f2;
}
.item:nth-of-type(3){
    background: red;
}

效果圖

圖片描述

第三個(gè)背景變紅效果圖
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px 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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

6. 經(jīng)驗(yàn)分享

  1. 在實(shí)例中我們看到 nth-of-type 和 nth-child 同樣都使用的是 （3）， 那么它們的不同是什么呢？下面這個(gè)例子我們一起看下：
<div class="demo">
    <p class="item">我是 p 標(biāo)簽</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 標(biāo)簽</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: 100px;
           height: 100px;
           text-align: center;
           line-height: 100px;
           border: 1px solid #ccc;
           background: #f2f2f2;
       }        
       .item:nth-of-type(3){
           background: red;
       }
       .item-2:nth-child(3){
           background: red;
       }

效果圖

圖片描述

`nth-of-type` 和 `nth-child` 效果圖

通過(guò)效果圖我們就清楚的明白他們的差異了。
簡(jiǎn)述實(shí)例展現(xiàn)效果，通過(guò)實(shí)例分析他們兩個(gè)的區(qū)別

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px 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 標(biāo)簽</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 標(biāo)簽</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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

下面是讓所有偶數(shù)的背景變紅。

 .item{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid #ccc;
            background: #f2f2f2;
        }
        .item:nth-of-type(2n){
            background: red;
        }

效果圖：

圖片描述

偶數(shù)的背景變紅 效果圖
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px 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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
  1. 使用 nth-of-type(3n+1) 起作用，而 nth-of-type(1+3n) 不起作用，所以 n 一定要放在最前面。