nth-child()和nth-of-type()的區別

nth-child(1)等于first-child
nth-of-type(1)等于first-of-type
如圖所示:

圖1-1
圖1-2

需要注意的是,最好指定父級元素,如.ct>p,要不然,不同級的子級元素都會被選中。如圖2所示:

圖2

兩者還有一處不同是,如果選擇器這樣寫

.ct>p:nth-child(2){
         color:red;
}

那么這個元素要滿足兩個條件才會被選中,1是他是.ct的子標簽的第二個;2是他還要是<p>標簽。兩個條件的關系是且,缺一不可。
如圖3所示:第一個元素是<div>,不符合要求,所以沒有被選中。

圖3

如圖4,改選第二個子元素,就符合選擇器的要求了。

圖4

nth-of-type(),就沒這個要求了。
拿上面的例子來說,如果第一個元素不是<h3>的話,他會在同父級元素下(選擇器上設置了父級)繼續找<h3>標簽,直到找到為止。如果沒有設置父級,那么他會在每個子級中尋找,如圖2所示。
update,發現一個問題,就是nth-of-type()前如果是類名的話,他也要符合兩個條件,一是類名相同,二是在其相同標簽中位于第X位,才能被選擇器選中。
如下圖所示:

圖5
圖6

謝謝觀看,如有不足之處,還請指出。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.class 和 id 的使用場景? 類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用,也...
    草鞋弟閱讀 2,453評論 0 1
  • 1、class和id的使用場景分別是什么? 首先,一個HTML文件中class名字可以有多個相同的,但是id的名字...
    李博洋li閱讀 929評論 0 1
  • 剛開始學習選擇器,一開始對偽類選擇器確實有點懵。昨天晚上自己動手寫了寫,終于是慢慢搞懂了。下面對一些容易誤解的一些...
    婷樓沐熙閱讀 2,503評論 4 7
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • 基本選擇器 *{} 通配符選擇器,適用任何元素h1 標簽選擇器,選擇h1標簽內元素....
    字母31閱讀 641評論 0 0