Element:nth-of-type注意事項
Element:nth-of-type使用時要注意,它選中的是元素。當你把Element改為class或id時,
它選中的依舊為元素。
如下程式碼:
.inner:nth-last-of-type(1){
color:red;
}
<div class="box">
<div class="inner">這是div</div>
<p class="inner">這是p</p>
<h1 class="inner">這是h1</h1>
<div class="inner">這是div</div>
<p class="inner">這是p</p>
<h1 class="inner">這是h1</h1>
<div class="inner">這是div</div>
<p class="inner">這是p</p>
<h1 class="inner">這是h1</h1>
<div class="inner">這是div</div>
</div>
也許你會認為只有最後一個div裡面的字型顏色會變紅,如果這樣的話那你就錯了。
變紅的是最後三個:p,h1,div。
要始終記住Element:nth-of-type選中的是元素。
效果:
相關推薦
Element:nth-of-type注意事項
Element:nth-of-type使用時要注意,它選中的是元素。當你把Element改為class或id時, 它選中的依舊為元素。 如下程式碼: .inner:nth-last-of-type(1){ color:red; } <div class="box"&g
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區別
html css css3 一、:nth-child 1.1 說明 :nth-child(n)選擇器匹配屬於其父元素的第N個子元素,不論元素的類型。n可以是數字、關鍵詞或公式。 註意:如果第N個子元素與選擇的元素類型不同則樣
nth-child,nth-last-child,only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child偽類區別和用法
type nth 只有一個 not 同時 選擇器 -type span 進行 我將這坨偽類分成三組,第一組:nth-child,nth-last-child,only-child第二組:nth-of-type,nth-last-of-type,第三組:first-of-tp
8.21 :odd??:nth-of-type??
css3 原因 har 實現 csharp 時間 js代碼 效果 logs 今天為了實現隔行變色,我在css裏寫: .note:odd{ background-color: #eee; } 有一個頁面有效果,另一個頁面沒效果,怎麽也找不到原因。。。各種嘗試各種清緩存
CSS常用選擇器記錄-:nth-of-type(n)
center pan col eight 記錄 logs round css 子元素 :nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素. n 可以是數字、關鍵詞或公式。 .step_icon3 li.item{ wid
nth-child 與 nth-of-type 選擇器的區別
-o class .text java 內容 改變 選擇 pre type <body> <ul> <div><a href=""></a></div> <li class="b
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>
nth-child() 和 nth-of-type() 的區別
alt ima 尋找 -o img TP http .com nth p:nth-child(3) 尋找父元素的第三個標簽為p的子元素。 p:nth-of-type(2) 在父元素的子元素中,僅尋找p標簽的第二個元素。 nth
nth-child(n) 與 nth-of-type(n) 區別
AD In 管理員 -c active 16px n) 個人 排序 <ul class="active_M_list"> <li> <img src="" alt=""> <
CSS的nth-of-type和nth-child的區別
alt ctype nbsp str lan eight n+1 width lang <!--源代碼--><!DOCTYPE html> <html lang="en"> <head> <meta chars
nth-of-type()的用法
同樣的標籤選擇其中一個,就用nth-of-type() <img src="http://cms-bucket.nosdn.127.net/2018/10/16/ad8698e497e14974a57dfbfa917b06d7.jpeg"> <img src="http:
CSS偽類選擇器nth-child 和nth-of-type
首先要說明的一點是:css中的偽類選擇器還是少用為妙,複雜的css選擇器(層級關係較深,偽類等)的效能並不好,主要應該影響的還是瀏覽器渲染時候的迴流(reflow)和重繪(repain)的等的效能(個人理解)。 然後要講正題啦! nth-of-type和nth-child這兩個選
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: <
nth-of-type等相對於父元素的結構偽類
相對於父元素的偽類 E:first-child:查詢相對於E的父元素的第一個指定型別的子元素 E:last-child:查詢相對於E的父元素的最後一個指定型別的子元素 E:first-of-
:nth-child和:nth-of-type的區別
:nth-child()表示父元素下的第n個子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素則沒有匹配的元素 :nth-of-type()表示父元素下的第n個型別的元素 比如div p:nth-of-type(2)表示div下的第二個
css選擇器nth-child與nth-of-type的區別
例項 例項1 選擇屬於父元素div的第三個子元素span,以及屬於父元素div的第六個子元素span。 <style> span:nth-child(3){ color: #ff0000; } span:nth
css3選擇器nth-of-type,:nth-last-of-type,:first-of-type,:last-of-type,:only-of-type
1, :nth-of-type(n) 匹配屬於父元素的特定型別的第N個子元素 匹配結果: 2, :nth-last-of-type(n),匹配其父元素下的第N個特定型別的子元素,從後往前 滿足條件:1,必須是特定型別 2,從後往前的第N個 3,:first-of-ty