你不知道的css3偽類的匹配方式

2021-10-14 11:41:36 字數 3703 閱讀 4314

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 第二個運...