CSS高階選擇器

2021-07-15 16:07:30 字數 847 閱讀 4236

css高階選擇器

例子:並集選擇器   p,h1   p和h1

標籤文字變紅色

交集選擇器(標籤選擇器+id

選擇器或者標籤選擇器

+類選擇器)   

p.class1  

類名為」class1」的p

標籤樣式中文字為黃色,當不同標籤使用相同類名時

後代選擇器   巢狀標籤 p span   

注意兩者標籤中有空格的                 

this is the first page

這裡span

標籤就屬於

p標籤的後代。例:你是你爸的後代,你是你爺的後代

子元素選擇器 p>span   這裡起作用的是第乙個

this is the first page

this is the

second page

這裡em

、span

標籤都是屬於

p標籤的後代,

p的子元素是em,

em的子元素是

span

,span是p

的孫子元素,子元素是指找兒子元素

屬性選擇器  input[type=」password」]  標籤為

input

且屬性及屬性值為

type

、password

的樣式

使用者名稱:」text」>

密碼:」password」>

重複密碼:」password」>

應用:京東註冊頁面

css高階選擇器

css3高階選擇器 偽類選擇器 p first of type 匹配同型別中的第乙個同級兄弟元素p p last of type 匹配同型別中的最後乙個同級兄弟元素p p first child 匹配父元素的第乙個子元素p。p last child 匹配父元素的第乙個子元素p。p nth child...

css選擇器高階

1 屬性選擇器 屬性和值選擇器 2 相鄰兄弟選擇器 3 後代選擇器 包含選擇器 4 子元素選擇器 5 選擇器分組 1 屬性選擇器 屬性和值選擇器 1 為帶有 title 屬性的所有元素設定樣式 title 2 為 title haha 的所有元素設定樣式 title haha 3 為 title的屬...

CSS高階選擇器

舉例 123 其中a為類,a 1為偽類,偽類也是一種類,他們之間用宮格隔開 我們選擇該標籤的時候可以.a.a 1,也有.a,也可以.a 1常用的兩個偽類選擇器 偽類選擇器都是用 連線的 類名 nth of type n 先確定選擇器,在匹配位置 舉例 第1個p 第2個p 第3個p 第4個p 第5個p...