亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

宋華 / 518人閱讀

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

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

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

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

nth發(fā)音/enθ/，表示第n個。匹配元素指定位置（an+b計算的結(jié)果）的兄弟元素?！拔恢谩币部梢苑Q為下標(biāo)，下標(biāo)從1開始，并且計數(shù)方式是從前到后（跟:nth-last-child相反）。下標(biāo)值等于表達式an+b的計算結(jié)果。

2. 語法

:nth-child(an+b)在下標(biāo)計算表達式an+b中：
a,b是系數(shù)可以是任意整數(shù)；
n就是個字面量“n”，表示是遞增變量，并且取值是從0開始的整數(shù)。
如a=3, b=1，則計算的下標(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，則計算的下標(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時，可以省略a,只保留符號

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

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

當(dāng)b<0時，必須省略加號+

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

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

:nth-last-child(an+b)

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

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

匹配元素指定位置（an+b計算的結(jié)果）且是相同類型的兄弟元素。功能和語法跟:nth-child的唯一區(qū)別是：nth-of-type比后者多了個限制條件，即相同標(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112624.html

相關(guān)文章

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

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

    Berwin 評論0 收藏0

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

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

    hedzr 評論0 收藏0

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

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

    sutaking 評論0 收藏0

  • 偽類與偽元素

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

    ChanceWong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<