css3的偽類(如:frist-child
,first-type-of
)有一些特別容易讓人忽視但又特別重要的特性,我認為只有理解了這些東西才能真正的理解偽類。
該偽類 等於:nth-child(1)
,匹配父元素下的第乙個匹配型別的子元素,但是這裡的第乙個是怎樣定義的很多人不知道。我們通過以下例子來理解:
>
.container .item
.container .item:first-child
style
>
class
="container"
>
class
="item"
>
p>
class
="item child"
>
p>
class
="item child"
>
p>
class
="item"
>
div>
div>
這裡的第乙個p背景色會變成綠色沒有問題。
再看第二個例子:
>
.container .item
.container .item:first-child
style
>
class
="container"
>
>
p>
class
="item"
>
p>
class
="item child"
>
p>
class
="item child"
>
p>
class
="item"
>
div>
div>
這裡多個了乙個p,但是沒有任何元素背景變綠色
再看第三個例子:
>
.container .item
.container .item:first-child
style
>
class
="container"
>
>
div>
class
="item"
>
p>
class
="item child"
>
p>
class
="item child"
>
p>
class
="item"
>
div>
div>
這裡多個了乙個非p元素,但是沒有任何元素背景變綠色
在看第4個例子
>
.container .item
.container .child:first-child
style
>
class
="container"
>
class
="item"
>
p>
class
="item child"
>
p>
class
="item child"
>
p>
class
="item"
>
div>
div>
這裡把匹配的類改為了child,但是沒有任何元素背景變綠色。
綜上可知,:fisrt-child
偽類匹配的」第乙個子元素「是指在父元素中與css正則匹配的並且是這個父元素中的第乙個子元素的元素,缺失乙個條件都不行。
同first-child
類似,它匹配的是父元素中與正則匹配的且是同種類元素的第乙個。
看第乙個例子:
>
.container .item
.container .item:first-of-type
style
>
class
="container"
>
class
="item"
>
p>
class
="item child"
>
p>
class
="item child"
>
p>
class
="item"
>
div>
div>
這裡的第乙個和第4個元素都會變成綠色背景
在看第二個例子:
>
.container .item
.container .item:first-of-type
style
>
class
="container"
>
>
p>
class
="item"
>
p>
class
="item child"
>
p>
class
="item child"
>
p>
class
="item"
>
div>
div>
只有最後乙個背景變成了綠色
再看第三個例子
>
.container .item
.container .child:first-of-type
style
>
class
="container"
>
class
="item"
>
p>
class
="item child"
>
p>
class
="item child"
>
p>
class
="item"
>
div>
div>
沒有任何背景變綠色
其它的偽類和這兩個類似,就不一一枚舉了,主要理解它的第一或者最後乙個是怎樣定義的,這是最重要的,這樣才不會在寫**時對於這種偽類不生效的情況感到詫異。
你不知道的CSS3選擇器 精闢用法
本文主要講 css3 中三中不常用的選擇器的精闢用法 e f,e f,e not selector 1 e f 選擇e元素後面的所有兄弟元素f 通用兄弟元素選擇器型別。選擇匹配f的所有元素,且匹配元素位於匹配e的元素後面。在dom結構樹中,e和f所匹配的元素應該在同一級結構上。需求 根據後台傳過來的...
你不知道的css小知識
使用 webkit transform scale 一種字型有粗體 斜體 下劃線 刪除線等諸多屬性。但是並不是所有字型都做了這些,一些不常用的字型,或許就只有個正常體,如果你用italic,就沒有效果了 這時候你就要用oblique.可以理解成italic是使用文字的斜體,oblique是讓沒有斜體...
你不知道的 和
開發中,編寫有一定逼格的 是每個程式猿都追求的。經常用來判斷的符號 和 也經常用來定義變數哦,你知道嗎?邏輯與 在有乙個運算元不是布林值的情況下,就不一定返回布林值。比如以下情況 1 第乙個運算元是物件,返回第二個數 var myinfo console.log myinfo 2 輸出22 第二個運...