CSS3新增 結構偽類選擇器 偽元素選擇器

2022-08-29 05:54:12 字數 524 閱讀 6844

1.結構偽類選擇器:可方便的選取乙個或多個特定的元素

:first-child 選取屬於其父元素的首個子元素

:last-child 選取屬於其父元素的最後乙個子元素

:nth-child(n) 選擇第n個子元素

n=even / 2n :選取偶數孩子  

n=odd / 2n+1 :選取奇數孩子

2.偽元素選擇器:

::first-letter / line: 文字第乙個單詞 / 第一行

::selection: 改變選中文字的樣式

::before & ::after

這兩兄弟特性一樣:1.必須要帶content屬性(可以為空)

2.屬於行內盒子

3.屬性選擇器:

div[class=xx]: 選擇類名為xx的div

div[class^=xx]: 選擇以類名為xx開頭的div

div[class$=xx]: 選擇類名是以xx結束的div

div[class*=xx]: 選擇類名帶有xx的div

css3 選擇器 CSS3新增偽類

css3新增偽類 我們來盤點一下css3新增了哪些偽類?a first of type 選擇器匹配屬於其父元素的特定型別的首個子元素的每個元素。b last of type 選擇器匹配屬於其父元素的特定型別的最後乙個子元素的每個元素。c only of type 選擇器匹配屬於其父元素的特定型別的唯...

CSS3 結構偽類選擇器

選擇器作用 first child 匹配子集的第乙個元素 last child 匹配子集的最後乙個元素 nth child n 根據索引n匹配值 nth last child n 根據索引n匹配值,索引從最後乙個開始數 nth of type n 根據標籤type和索引n匹配值 nth last o...

css3偽類選擇器

css3偽類選擇器 動態偽類選擇器 他不存在於html中,只有在互動的過程中,才能使用動態偽類選擇器對其進行樣式的渲染 超連結ui元素狀態偽類選擇器 結構偽類選擇器 first child 選擇某個元素的第乙個子元素 last child 選擇某個元素的最後乙個子元素 nth child 選擇某個元...