CSS3-選擇器-結構化偽類

宋華發布于2019-08-29 13:28 / 448人閱讀

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

結構化偽類(Structural pseudo-classes)選擇器

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

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

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

2. 語法

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

3.舉例

我們有一段html:

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

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

4.下標變量

變量odd, even是特殊的下標值，分別表示奇數和偶數位置。

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

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

5. 省略表示法

當a=1或者a=-1時，可以省略a,只保留符號

當a=0時，可以省略an部分

當b=0時，可以省略b部分

當b<0時，必須省略加號+

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

6.小結

1）下標從1開始，小于1的計算結果都是無效的

:nth-last-child(an+b)

功能和語法同:nth-child,除了下標計數方式不同。nth-last-child是從后向前計數。

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

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

Style片段：

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

顯示如下：

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

nth-last-of-type和nth-of-type的區別就如同nth-last-child和nth-child區別

參考

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

云服務器 GPU云服務器 python選擇結構選擇器派生選擇器省市選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112624.html

談談css偽類與偽元素

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

Berwin 2019-08-01 18:04 評論0 收藏0
談談css偽類與偽元素

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

hedzr 2019-08-29 13:53 評論0 收藏0
總結30個CSS3選擇器

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

sutaking 2019-04-23 11:43 評論0 收藏0
偽類與偽元素

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

ChanceWong 2019-08-30 15:55 評論0 收藏0