區分css選擇器-:first-child 與:first-of-type
<!DOCTYPE html> <html> <head> <style> /*嫡長子*/ p:first-child { background-color:yellow; } /*第一個嫡子*/ p:first-of-type { color:red; } </style> </head> <body> ------下面是我兒子first-of-type找到第一個符合條件的子元素-------------- <div>我才是長子(第一個子元素)</div> <p>嫡子</p> <p>嫡子</p> <div> -----下面是我兒子first-child找到第一個子元素符合條件---------- <p>我是嫡長子</p> <p>嫡子</p> </div> <p><b>註釋：</b>對於 IE8 及更早版本的瀏覽器中的 :first-child，必須宣告 <!DOCTYPE>。</p> </body> </html>
相關推薦
css選擇器nth-child與nth-of-type的區別
例項 例項1 選擇屬於父元素div的第三個子元素span，以及屬於父元素div的第六個子元素span。 <style> span:nth-child(3){ color: #ff0000; } span:nth
CSS3選擇器:nth-child與:nth-of-type區別
html css css3 一、:nth-child 1.1 說明 :nth-child(n)選擇器匹配屬於其父元素的第N個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。 註意：如果第N個子元素與選擇的元素類型不同則樣
CSS偽類選擇器nth-child 和nth-of-type
首先要說明的一點是：css中的偽類選擇器還是少用為妙，複雜的css選擇器（層級關係較深，偽類等）的效能並不好，主要應該影響的還是瀏覽器渲染時候的迴流（reflow）和重繪（repain）的等的效能（個人理解）。 然後要講正題啦！ nth-of-type和nth-child這兩個選
CSS3選擇器:nth-child和:nth-of-type之間的差異
nbsp 元素 段落 -c 之間 css3選擇器 子元素 差異 是個 對於p:nth-child選擇器，選擇一個元素如果： 這是個段落元素 這是父標簽的第二個子元素 對於p:nth-of-type選擇器，選擇一個元素如果： 選擇父標簽的第二個段落子元素 :nth-o
CSS3選擇器:nth-child和:nth-of-type的差異
鏈接 code 如果 參考 res ngx target -o pos p:nth-child(2)表示這個元素要是p標簽，且是第二個子元素，是兩個必須滿足的條件。 <section> <div>我是一個普通的div標簽</div>
選擇器 nth-child和 nth-of-type的區別
info 失效 red 選擇器 -c alt 元素 分享圖片 light <ul> <li>1</li> <li>2</li> <li>3</li>
CSS3偽類選擇器nth-child和nth-of-type淺析
1. nth-child 定義和用法 :nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。n 可以是數字、關鍵詞或公式。 ① n為數字時，n為大於0的整數
區分css選擇器-:first-child 與:first-of-type
<!DOCTYPE html> <html> <head> <style> /*嫡長子*/ p:first-child { background-color:yellow; } /*第一個嫡子*/ p:first-of-type { color:red
css選擇器中:first-child與:first-of-type的區別
:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素。比如有段程式碼： <div> <p>第一個元素</p> <h1>第二個元素</h1>
CSS選擇器的權重與優先規
屬性 元素選擇器 1=1 style div 我們 表達 等級 nav 我們把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以這一等級的權值，最後把所有等級的值相加得出選擇器的特殊值。 4個等級的定義如下： 第一等：代表內聯樣式，如: s
nth-child 與 nth-of-type 選擇器的區別
-o class .text java 內容 改變 選擇 pre type <body> <ul> <div><a href=""></a></div> <li class="b
Html+Css詳解Css選擇器，優先順序與匹配原理
給一個p標籤增加一個類（class），可是執行後該class中的有些屬性並沒有起作用。通過Firebug檢視，發現沒有起作用的屬性被覆蓋了。這個時候突然意識到了CSS選擇器的優先順序問題，這裡就CSS選擇器的優先順序問題做了一些總結。 選擇器種類 嚴格來講，選擇器的種類可以分為三種：標籤名選擇器、類選擇器
CSS選擇器、優先順序與匹配原理
http://www.cnblogs.com/aaronjs/p/3156809.html 計算指定選擇器的優先順序:重新認識CSS的權重 通配選擇符的權值 0,0,0,0標籤的權值為 0,0,0,1類的權值為 0,0,1,0屬性選擇的權值為 0,0,1,1 0,0,1,0
css選擇器中a與a:link的區別
css選擇器中a:link是選擇尚未點選的連結，a是選擇連結，在一個連結未點選的時候好像可以同時被這兩個選擇器選擇。 但是a與a:link選擇器是有區別的，a選擇器是選擇所有連結，不管是否有效，a:link選擇器是選擇有效的連結。 例：<a href="#">點
CSS選擇器的權重與優先規則
net gre cells 修復bug 技術 -c article keyword gic 原文:CSS選擇器的權重與優先規則我們在使用CSS對網頁元素定義樣式時經常會遇到這種情況：要對一般元素應用一般樣式，然後在更特殊的元素上覆蓋它們。那麽我們怎麽樣來保證我們所新定義的元
CSS3::nth-child與:nth-of-type區別
css3選擇器 block lan strong title 選擇 示例 紅色 arc 一、:nth-child 1.1 說明 :nth-child(n)選擇器匹配屬於其父元素的第N個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。 註意：如果第N個子元素
CSS3之nth-child與nth-of-type
在css3中，有一系列類似的選擇器， 它們在jQuery中也有與之功能相同的用法，所以本文將這些選擇器中典型的2個進行說明，這樣就同時掌握了css3這型別選擇器和jquery這型別選擇器的用法。 nth-child與nth-of-type系列選擇
選擇器:first-child與:last-child失效的解決方法
作為還在努力練習的程式碼小白來說，有時類名或者ID名太多很容易就會搞混，為此，在練習中會想著借用多樣的選擇器來設定而不是每一個標籤都設一個類名（Id名），在此次練習中使用選擇器:first-child與:last-child就遇到了失效的問題： 使用一個並
CSS選擇器相鄰兄弟選擇器（+）、:first-child、:last-child、:nth-child()、nth-of-type()，:focus等的用法
前言：我們在碼程式碼的時候，經常會遇到需要給第一個或者最後一個元素新增或刪除樣式，還有一些比較特殊的是選取第幾個元素新增或刪除樣式，下面記錄css選擇器中常見的相鄰兄弟選擇器（+）、子元素選擇器（>）:first-child、:last-child、:n
css3 - 選擇器first-child、last-child、nth-child、nth-last-child、nth-of-type
https://blog.csdn.net/erdouzhang/article/details/70842177 最近系統專案，遇到較多表格 和 div 需要根據 寫樣式的 1.first-child（IE7相容）、last-child（IE8不相容） html： <