之所以要單開一篇博文寫這個選擇器,是因為我在刷題的時候發現這個選擇器的定義是:匹配屬於其父元素的第 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選擇器...