css3結構偽類選擇器使用

2021-10-01 03:01:49 字數 707 閱讀 5114

結構偽類選擇器使用方法比如:

e:first-child 匹配父元素中的第乙個子元素e

12

345```css

ul li:first-child

如此寫就可以進行對父元素中的第乙個子元素進行選擇並且可以將第乙個子元素的字型顏色變成紅色;

e:last-child 選擇父元素中的最後乙個子元素並進行更改

12

345ul li:last-child

如此和first-child的用法一樣

當你想選中父元素中的某乙個子元素是你可以用下面的結構偽類選擇器

even代表的是偶數可以將父元素中的偶數項進行變色

odd 代表的是偶數可以將父元素中的奇數項進行變色

如此就可以將第三個li進行改變字型顏色

ul li:nth-child(even)

注意:類選擇器 ,屬性選擇器,偽類選擇器的權重為10

css3 偽類選擇器使用

web前端同學都需要清楚偽類選擇器的使用。像 link,visited,hover,active,focus,first child,lang大家已經很熟悉了,今天說說css3中新增的 nth child 和 nth of type nth child 用法 nth child n 選擇器匹配屬於其...

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 選擇某個元...