CSS關於選擇器 nth child n

2021-07-30 22:54:24 字數 1244 閱讀 7823

之所以要單開一篇博文寫這個選擇器,是因為我在刷題的時候發現這個選擇器的定義是:匹配屬於其父元素的第 n 個子元素,

不論元素的型別

。(1)我不太明白所謂的「不論元素的型別」是什麼意思,剛開始我以為是不論標籤元素型別,也就是說 選擇當前標籤e的父級元素的第n個子元素,不論這個元素是否是e標籤,但是我寫了乙個例子,發現如果該元素不是e標籤,那麼選擇符無效,詳見**:

第乙個段落。

第二個段落。

第三個段落。

第四個段落。

第五個段落。

第六個段落。

第七個段落。

第八個段落。

第九個段落。

**的效果圖如下:

(2)接著我又設想,將這個選擇器跟類選擇器或者id選擇器組合,這樣就可以判斷該選擇器:nth-child(n)是否可以不受前面標籤選擇器的影響,從而實現篩選物件「不論元素的型別」。但是我查了一下網上的資料和相關的例子,沒有發現有將類選擇器與它組合的現象,並且寫了乙個例子校驗一下,發現這種組合是無效的,**如下:

第乙個段落。

第二個段落。

第三個段落。

第四個段落。

第五個段落。

第六個段落。

第七個段落。

第八個段落。

第九個段落。

結果沒有任何元素選中,因此看來這個選擇器不能與id或者類選擇符同時使用。

(3)我突然想到input標籤的有幾種型別,難道這個「不論元素的型別」指的其實是同標籤的不同型別嗎?再寫乙個例子試一下:

效果如下:

然後發現果然是不區分型別的,所以

結論就是:

(1)選擇器:nth-child(n)一般跟標籤選擇器一起使用,跟類選擇器或id選擇器一起使用時無效;

(2)它用來匹配父元素的第n個子元素e,假設該子元素不是e標籤,則選擇符無效;

(3)它不區分同乙個標籤的不同型別,eg.input標籤的不同type。

好吧,其實我就是看書看煩了,過來搗鼓一下,歡迎抓蟲~

最後推薦乙個覺得講解nth-child(

n

關於CSS選擇器

通用選擇器 這個選擇器不經常用,看著省事,問題也有。標籤選擇器 html標籤都可以進行設定,但是常用的如ul,li,a標籤等最好還是給乙個class或者id,乙個頁面中如果有多個相同標籤,容易混淆。類選擇器 類選擇器用得比較多,也比較方便。同乙個類名可以賦給多個標籤,同樣設定了樣式也可以進行重複使用...

關於CSS選擇器

css選擇器是css規則的一部分,它能夠告訴瀏覽器,相應的html元素的樣式規則。id選擇器,類選擇器,元素選擇器 屬性選擇器 屬性選擇器只對存在屬性的html元素有效,常見標籤的href屬性 url a href 偽類和偽元素選擇器 article 組合器選擇器 important style行內...

關於CSS選擇器

關於css選擇器部分摘自另一博友博文 關於css選擇器 css基本語法 1元素選擇器 直接選擇文件元素 比如head,p 2 類選擇器 元素的class屬性,比如 類名就是important important選擇所有有這個類屬性的元素 可以結合元素選擇器,比如p.important 3 id選擇器...