成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS3-選擇器-結(jié)構(gòu)化偽類

宋華 / 481人閱讀

摘要：結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器是基于元素在樹中的結(jié)構(gòu)特性跟父節(jié)點(diǎn)或者兄弟節(jié)點(diǎn)的關(guān)系進(jìn)行匹配選擇，比如某個(gè)元素的第一個(gè)子節(jié)點(diǎn)，最后一個(gè)節(jié)點(diǎn)等等。是從后向前計(jì)數(shù)。功能匹配元素指定位置計(jì)算的結(jié)果且是相同類型的兄弟元素。

結(jié)構(gòu)化偽類(Structural pseudo-classes)選擇器

結(jié)構(gòu)化偽類選擇器是基于DOM元素在DOM樹中的結(jié)構(gòu)特性(跟父節(jié)點(diǎn)或者兄弟節(jié)點(diǎn)的關(guān)系)進(jìn)行匹配選擇，比如某個(gè)元素的第一個(gè)子節(jié)點(diǎn)，最后一個(gè)節(jié)點(diǎn)等等。

:nth-child(an+b) 1. 功能

nth發(fā)音/enθ/，表示第n個(gè)。匹配元素指定位置（an+b計(jì)算的結(jié)果）的兄弟元素。“位置”也可以稱為下標(biāo)，下標(biāo)從1開始，并且計(jì)數(shù)方式是從前到后（跟:nth-last-child相反）。下標(biāo)值等于表達(dá)式an+b的計(jì)算結(jié)果。

2. 語法

:nth-child(an+b)在下標(biāo)計(jì)算表達(dá)式an+b中：
a,b是系數(shù)可以是任意整數(shù)；
n就是個(gè)字面量“n”，表示是遞增變量，并且取值是從0開始的整數(shù)。
如a=3, b=1，則計(jì)算的下標(biāo)有（n從0開始遞增）：
n=0 -> 3 * 0 + 1 = 1
n=1 -> 3 * 1 + 1 = 4
n=2 -> 3 * 2 + 1 = 7
...
即匹配下標(biāo)為1,4,7...的兄弟元素。
如a=-3, b=1，則計(jì)算的下標(biāo)有：
n=0 -> -3 * 0 + 1 = 1
n=1 -> -3 * 1 + 1 = -2（結(jié)果值小于1，無效）
n=2 -> -3 * 2 + 1 = -5（結(jié)果值小于1，無效）
...
即只匹配下標(biāo)為1的兄弟元素。

3.舉例

我們有一段html:

 
    
     
  • 1
    • 
     
  • 2
    • 
     
  • 3
    • 
     
  • 4
    • 
     
  • 5
    • 
     
  • 6
    • 
     
  • 7
    • 
     
  • 8
    • 
 
/* 表示下標(biāo)為1,3,5,7的li標(biāo)簽字體顏色為紅色*/
li:nth-child(2n+1) 
{
    color: red;
}

/* 表示下標(biāo)為2,4,6,8的li標(biāo)簽字體顏色為紅色*/
li:nth-child(2n) 
{
    color: red;
}
4.下標(biāo)變量

變量odd, even是特殊的下標(biāo)值，分別表示奇數(shù)和偶數(shù)位置。

/* 表示下標(biāo)為1,3,5,7的li標(biāo)簽字體顏色為紅色*/
li:nth-child(odd) 
{
    color: red;
}

/* 表示下標(biāo)為2,3,4,8的li標(biāo)簽字體顏色為紅色*/
li:nth-child(even) 
{
    color: red;
}
5. 省略表示法

當(dāng)a=1或者a=-1時(shí)，可以省略a,只保留符號(hào)

當(dāng)a=0時(shí)，可以省略an部分

當(dāng)b=0時(shí)，可以省略b部分

當(dāng)b<0時(shí)，必須省略加號(hào)+

:nth-child(10n+-1) /*無效的語法，必須省略加號(hào)*/
:nth-child(10n-1) /*有效的寫法*/
6.小結(jié)

1）下標(biāo)從1開始，小于1的計(jì)算結(jié)果都是無效的

:nth-last-child(an+b)

功能和語法同:nth-child,除了下標(biāo)計(jì)數(shù)方式不同。nth-last-child是從后向前計(jì)數(shù)。

:nth-of-type(an+b) 1. 功能

匹配元素指定位置（an+b計(jì)算的結(jié)果）且是相同類型的兄弟元素。功能和語法跟:nth-child的唯一區(qū)別是：nth-of-type比后者多了個(gè)限制條件，即相同標(biāo)簽的兄弟元素才算數(shù)。
如HTML片段如：


    
1

    
2

    
3

    
4

    
5

    
15

    
16

    
17

    
18

    
19

Style片段：

.item:nth-of-type(2n+1) {
    color: red;
}

顯示如下：

:nth-last-of-type(an+b)

nth-last-of-type和nth-of-type的區(qū)別就如同nth-last-child和nth-child區(qū)別

參考

https://www.w3.org/TR/css3-se...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112624.html

相關(guān)文章

  • 談?wù)刢ss偽類與偽元素

    摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素?？梢酝ㄟ^對(duì)父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

    Berwin 評(píng)論0 收藏0

  • 談?wù)刢ss偽類與偽元素

    摘要：狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素?？梢酝ㄟ^對(duì)父元素添加偽類撐開父元素高度，因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

    hedzr 評(píng)論0 收藏0

  • 總結(jié)30個(gè)CSS3選擇器

    摘要：選擇器也可以應(yīng)用到子選擇器中，例如下面的代碼這樣為的所有子標(biāo)簽元素都被選中了，并且設(shè)置了。子選擇器它與差別就是后面這個(gè)指揮選擇它的直接子元素。可以的話，盡量使用標(biāo)準(zhǔn)的選擇器。偽類選擇器和這倆偽類。根據(jù)標(biāo)準(zhǔn)規(guī)定，可以使用兩個(gè)冒號(hào)。1 *：通用選擇器 ? 1 * {?? margin:0;?? padding:0;? } *選擇器是選擇頁面上的全部元素，上面的...

    sutaking 評(píng)論0 收藏0

  • 偽類與偽元素

    摘要：一偽類偽類包含兩種狀態(tài)偽類偽類和結(jié)構(gòu)性偽類。狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。二偽元素偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作，而不是描述狀態(tài)。 一、偽類 偽類包含兩種：狀態(tài)偽類（UI 偽類）和結(jié)構(gòu)性偽類。 (1)狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。 在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。當(dāng)元素處于某狀態(tài)時(shí)會(huì)呈現(xiàn)該樣式，而進(jìn)入另一狀態(tài)后，該樣...

    ChanceWong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<