前端學習筆記 CSS 2 選擇器

2021-10-07 09:59:14 字數 1457 閱讀 9582

交集選擇器：

選擇器1 選擇器2 選擇器3{}

p h1 div
選擇器分組（並集）：

選擇器1,選擇器2,選擇器3,選擇器4{}

p,h1,div,sapn
子元素選擇器：

父元素 > 子元素{}

div>span
後代元素選擇器：

祖先 後代{}

div span
兄 + 弟
後面所有的兄弟選擇器：

不會選中前面的兄弟

兄 ~ 弟
指定屬性為title：

p[title]
指定屬性值為abc：

p[title=


[abc]
屬性值以abc開頭：

p[title^=


[abc]
屬性值以abc結尾：

p[title$=


[abc]
屬性值包含abc：

p[title*=


[abc]


:first-child  	 第乙個元素


:last-child 最後乙個元素


:nth-


child


(n) 選中第n個元素


:nth-


child


(2n)


2n 或 even 偶數為的元素


:nth-


child


(2n+1)


2n+1 或 odd 奇數字的元素
:first-


of-type 第乙個元素


:last-


of-type 最後乙個元素


:nth-of-


type


(n) 選中第n個元素


:not(


) 否定選擇器


:not(


:nth-


child(3


)) 除了第3個
專案

value

value

內聯樣式

1,0,0,0

style=「width:500px」;

id選擇器

0,1,0,0

#id類和偽類選擇器

0,0,1,0

.class

元素選擇器

0,0,0,1

div通配選擇器

0,0,0,0

*繼承的樣式

沒有優先順序

CSS2的選擇器

選擇器 在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件，也就是 樣式 作用於網頁中的哪些元素。p 在html中用class 類選擇器名稱 引用 類選擇器名稱 在html中用id id選擇器名稱 引用 id選擇器名稱類選擇器與id選擇器的異同 兩者都能作用於所有標籤，不同的是 在乙...

css2的幾種特殊選擇器

以下均支援ie6以上版本的瀏覽器 1 屬性選擇器 title title qjyue77 title hello 上面的樣式對下面的html的效果為 可以應用樣式 h1 title hello world hello worldh2 title student hello hello w3schoo...

CSS2偽類選擇器要點

有四個選擇器，分別是 hover 滑鼠懸停 link 鏈結不能使用時 visited 鏈結被點選後 active 鏈結被點選時，如果滑鼠不放，就會一直觸發active屬性 link在w3c中記錄為鏈結未被點選時，實際上是當href屬性不能使用時觸發，列如南達科他級 此時會啟用link屬性 如果某乙個...