CSS3屬性筆記 二)

2021-07-02 13:48:21 字數 3201 閱讀 4285

css3屬性筆記選擇器(上)

「:first-child」選擇器表示的是選擇父元素的第乙個子元素的元素e。簡單點理解就是選擇元素中的第乙個子元素,記住是子元素,而不是後代元素。

link1

link2

link3

通過「:first-child」選擇器定位列表中的第乙個列表項,並將序列號顏色變為紅色。

「:last-child」選擇器與「:first-child」選擇器作用類似,不同的是「:last-child」選擇器選擇的是元素的最後乙個子元素。例如,需要改變的是列表中的最後乙個「li」的背景色,就可以使用這個選擇器,

ul>li:last-child

第一段落

第二段落

第三段落

第四段落

第五段落

在部落格的排版中,每個段落都有15px的margin-bottom,假設不想讓部落格「post」中最後乙個段落不需要底部的margin值,可以使用「:last-child」選擇器。

經驗與技巧:當「:nth-child(n)」選擇器中的n為乙個表示式時,其中n是從0開始計算,當表示式的值為0或小於0的時候,不選擇任何匹配的元素。如下表所示:

第一段落

第二段落

第三段落

第四段落

第五段落

通過「:nth-child(n)」選擇器,並且引數使用表示式「2n」,將偶數行列表背景色設定為橙色。

「:nth-last-child(n)」選擇器和前面的「:nth-child(n)」選擇器非常的相似,只是這裡多了乙個「last」,所起的作用和「:nth-child(n)」選擇器有所區別,從某父元素的最後乙個子元素開始計算,來選擇特定的元素。

第一段落

第二段落

第三段落

第四段落

第五段落

選擇列表中倒數第四個列表項,將其背景設定為橙色。

「:first-of-type」選擇器類似於「:first-child」選擇器,不同之處就是指定了元素的型別,其主要用來定位乙個父元素下的某個型別的第乙個子元素。

示例演示:

通過「:first-of-type」選擇器,定位div容器中的第乙個p元素(p不一定是容器中的第乙個子元素),並設定其背景色為橙色。

第一段落

第二段落

第三段落

第四段落

第五段落

改變第乙個段落的背景為橙色

第一段落

第二段落

第三段落

第四段落

第五段落

「:last-of-type」選擇器和「:first-of-type」選擇器功能是一樣的,不同的是他選擇是父元素下的某個型別的最後乙個子元素。

示例演示

通過「:last-of-type」選擇器,最後乙個段落元素背景設定為橙色

第一段落

第二段落

第三段落

第四段落

第五段落

演示結果:

「:nth-last-of-type(n)」選擇器和「:nth-of-type(n)」選擇器是一樣的,選擇父元素中指定的某種子元素型別,但它的起始方向是從最後乙個子元素開始,而且它的使用方法類似於上節中介紹的「:nth-last-child(n)」選擇器一樣。

通過「:nth-last-of-type(n)」 選擇倒數第三個段落背景設定為橙色。

.post 

.post p:nth-last-of-type(3)

第一段落

第二段落

第三段落

第四段落

第五段落

示例演示

「:only-child」選擇器選擇的是父元素中只有乙個子元素,而且只有唯一的乙個子元素。也就是說,匹配的元素的父元素中僅有乙個子元素,而且是乙個唯一的子元素。

我是乙個段落

我是乙個段落

我是乙個段落

通過「:only-child」選擇器,來控制僅有乙個子元素的背景樣式,為了更好的理解,我們這個示例通過對比的方式來向大家演示。

「:only-of-type」選擇器用來選擇乙個元素是它的父元素的唯一乙個相同型別的子元素。這樣說或許不太好理解,換一種說法。「:only-of-type」是表示乙個元素他有很多個子元素,而其中只有一種型別的子元素是唯一的,使用「:only-of-type」選擇器就可以選中這個元素中的唯一乙個型別子元素。

background: orange;

}我是乙個段落

我是乙個段落

我是乙個div元素

我是乙個段落

通過「:only-of-type」選擇器來修改容器中僅有乙個div元素的背景色為橙色。

CSS3屬性之二 box shadow

box shadow 陰影水平偏移值 可取正負值 陰影垂直偏移值 可取正負值 陰影模糊值 陰影顏色 設定塊陰影 box shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...

CSS3屬性之二 box shadow

box shadow 陰影水平偏移值 可取正負值 陰影垂直偏移值 可取正負值 陰影模糊值 陰影顏色 設定塊陰影 box shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...

CSS3的transform屬性(二)

前面介紹了基本的變形方式 旋轉,移動,縮放,傾斜 現在來介紹和這些變形方式相關聯的屬性。transform origin 每個元素都有乙個形變中心點。元素的旋轉縮放等形邊都是基於形變中心點變化的。形變中心點的座標是以元素的左上角為座標原點的。上圖backface visibility backfac...