欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異

  發(fā)布時間：2017-09-18 14:35:47   作者：7天蘋果   我要評論
本篇文章主要介紹了CSS3選擇器:nth-child和:nth-of-type之間的差異，非常具有實用價值，需要的朋友可以參考下

先看一個簡單的實例，首先是HTML部分：

<section>
    <p>我是第1個p標簽</p>
    <p>我是第2個p標簽</p>  <!-- 希望這個變紅 -->
</section>

然后兩個選擇器相對應的CSS代碼如下：

p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }

上面這個例子中，這兩個選擇器所實現(xiàn)的效果是一致的，第二個p標簽的文字變成了紅色：

盡管上面兩個demo的最后效果一致，但是兩個選擇器之間存在差異是必然的。

對于:nth-child選擇器，在簡單白話文中，意味著選擇一個元素：

1、這是個段落元素
2、這是父標簽的第二個孩子元素

對于:nth-of-type選擇器，意味著選擇一個元素：

1、選擇父標簽的第二個段落子元素

我們把上面的實例稍作修改，就可以看到這兩個選擇器之間的差異表現(xiàn)了，如下HTML代碼：

<section>
    <div>我是一個普通的div標簽</div>
    <p>我是第1個p標簽</p>
    <p>我是第2個p標簽</p>  <!-- 希望這個變紅 -->
</section>

還是與上面例子一致的CSS測試代碼：

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

 

p:nth-of-type(2) { color: red; }

這時候兩個選擇器所渲染的結果就不一樣了。

p:nth-child(2)其渲染的結果不是第二個p標簽文字變紅，而是第一個p標簽，也就是父標簽的第二個子元素。

p:nth-of-type(2)的表現(xiàn)顯得很堅挺，其把希望渲染的第二個p標簽染紅了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • 詳解CSS nth-child與nth-of-type的元素查找方式

    這篇文章主要介紹了詳解CSS nth-child與nth-of-type的元素查找方式的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-22

  • 詳解CSS3中nth-child與nth-of-type的區(qū)別

    在css3中有兩個新的選擇器可以選擇父元素下對應的子元素，一個是:nth-child 另一個是:nth-of-type。 但是它們到底有什么區(qū)別呢？下面這篇文章主要就給介紹了CSS3中nth-chil
    2017-01-05

  • 使用css屬性:nth-child(n)匹配選擇第n個子元素

    css匹配選擇第n個子元素可以使用:nth-child(n) 選擇器，其匹配屬于其父元素的第N個子元素，不論元素的類型
    2014-07-29

  • CSS3中:nth-child和:nth-of-type的區(qū)別深入理解

    關于:nth-child和:nth-of-type的區(qū)別之前一直沒太注意，經深入理解才發(fā)現(xiàn)里面其實暗藏玄機
    2014-03-10

  • CSS3 :nth-child()偽類選擇器實現(xiàn)奇偶行顯示不同樣式

    css3的強大，讓人驚嘆，今天我們就來“前瞻”一下CSS3的一個偽類選擇器“:nth-child()”實現(xiàn)奇偶行顯示不同樣式，具體的詳細示例可以參考下文，希望對大家有所幫助
    2013-11-05

  • css :nth-child與:nth-of-type之小解

    css :nth-child與:nth-of-type之小解,需要的朋友可以參考下。
    2011-10-07

  • CSS3 偽類選擇器 nth-child()說明

    CSS3標準已提出數(shù)年，但是目前能實現(xiàn)她的瀏覽器并不多，雖然部分瀏覽器能實現(xiàn)部分規(guī)范，但這又有什么用呢？面對更多的兼容性問題，今天我們就來“前瞻”一下CSS3的一個偽類
    2010-07-10

  • CSS3偽類選擇器：nth-child()

    網頁制作Webjx文章簡介：CSS3標準已提出數(shù)年，但是目前能實現(xiàn)她的瀏覽器并不多，雖然部分瀏覽器能實現(xiàn)部分規(guī)范，但這又有什么用呢？面對更多的兼容性問題，今天我們就來“
    2009-04-02

  • 總結下常用的nth-child選擇符

    這篇文章主要介紹了總結下常用的nth-child選擇符，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學
    2020-12-11

最新評論