国产视频app 今天說一個在css3中不常用的到的選擇器屬性 :nth-child(),它可以方便的對某個HTML元素下的任何子元素進行操作,而要操作的HTML元素不分任何類型。

CSS3  :nth-child() 屬性定義

:nth-child(n):選擇器匹配屬于其父元素的第 N 個子元素,任何類型的元素都可以。

語法:

:nth-child(n)

參數:

n:可以為數字,公式或關鍵詞

CSS3  :nth-child() 屬性使用方法

HTML代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{
            float: left;
            list-style: none;
            border: 0;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color:red;
            margin-left: 10px;
            color:#fff;
        }
    </style>
</head>
<body>
    <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>
    </ul>
</body>
</html>

運行結果:

CSS3 中的 :nth-child() 選擇器

国产视频app 以下所有的示例,都以上面的 html 代碼為標準,只修改其CSS屬性

示例1:

国产视频app 改成第二個 li 標簽字體的顏色為藍色

CSS代碼:

li:nth-child(2){
    background-color:blue;
}

運行結果:

CSS3 中的 :nth-child() 選擇器

注意:如果 li:nth-child() 中的參數為單個的數字,則表示第 n 個元素開始。

国产视频app 下面的示例中,使用了(an+b) 公式,a代表一個循環的大小,n是一個計數器(從0開始),b為偏移量。

示例2:

使前三個 li 標簽的顏色為綠色

CSS代碼:

li:nth-child(-n+3){
    background-color:green;
}

運行結果:

CSS3 中的 :nth-child() 選擇器

注:-n+3 表示小于以及等于 3的標簽

示例3:

前三個 li 標簽除外,改變其余的所有標簽

CSS代碼:

li:nth-child(n+3){
    background-color:green;
}

運行結果:

CSS3 中的 :nth-child() 選擇器

示例4:

国产视频app 改變偶數 li 標簽的顏色

CSS代碼1:

li:nth-child(2n){
    background-color:green;
}

CSS代碼2:

li:nth-child(even){
    background-color:green;
}

運行結果:

CSS3 中的 :nth-child() 選擇器

說明:

国产视频app 1、代碼1 與 代碼2 是等價的

国产视频app 2、even 是用來表示偶數的關鍵詞語

示例5:

改變奇數 li 標簽的顏色

代碼1:

li:nth-child(2n-1){
    background-color:green;
}

代碼2:

li:nth-child(odd){
    background-color:green;
}

運行結果:

CSS3 中的 :nth-child() 選擇器

說明:

国产视频app 1、代碼1 與 代碼2 為等價的

2、odd 是用來表示 奇數 的關鍵詞

示例6:

每隔 2 li標簽,修改其顏色

CSS代碼:

li:nth-child(3n-2){
    background-color: green;
}

運行結果:

CSS3 中的 :nth-child() 選擇器