CSS 選擇器
一、常用選擇器
-
元素選擇器 p {}
-
id 選擇器 #name {}
-
class 類選擇器 .box {}
二、復合選擇器
交集選擇器 p.red {} .box.red {}
選中同時符合多個條件的元素
注意：交集選擇器中如果有元素選擇器，而元素選擇器必須在開頭
-
選擇器分組（并集選擇器）h1, p, .box {}
同時選擇多個選擇器對應的元素
三、關系選擇器
-
子選擇器 .box > p {}
選中指定父元素的指定子元素（可以多個）
-
后代選擇器 .box p {}
選中指定父元素的指定后代元素（可以多個）
-
兄弟選擇器
-
p + span {}選擇下一個指定的兄弟元素，必須是緊挨著的，而且只能選擇一個
-
p ~ span {}選擇下邊所有指定的兄弟，被隔開的都能選擇到，是多個
-
-
屬性選擇器
-
p[屬性名] {} 選擇含有此屬性的元素
-
p[屬性名 = 屬性值] {} 選擇含有指定屬性和屬性值的元素
-
p[屬性名 ^= 屬性值] {} 選擇屬性值以指定值開頭的元素
-
p[屬性名 $= 屬性值] {} 選擇屬性值以指定值結尾的元素
-
p[屬性名 *= 屬性值] {} 選擇屬性值中含有某值的元素
-
偽類選擇器
偽類：不存在的類，特殊的類
-
偽類用來描述一個元素的特殊狀態
例如，第一個子元素，被點擊的元素，滑鼠移入的元素，，，
-
偽類一般是 : 開頭
-
:first-child第一個子元素 -
:last-child最后一個子元素 -
:nth-child()選中第n個子元素特殊值：
? n 第n個 n的范圍 0 ~ +infinity
? 2n 或 even 表示選中偶數位的元素
? 2n+1 或 odd 表示選中奇數位的元素
注意：是根據所有的子元素進行排序
-
:first-of-type -
:last-of-type -
:nth-of-type()這些偽類功能和上面的
nth-child()類似，但是他們是在同類元素中排序 -
:not()否定偽類將符合條件的元素從選擇器中去除
eg:
ur > li:not(:nth-of-type(3)){}除了第3個 li 的其他所有 li 元素
-
-
超鏈接の偽類
-
a:link用于表示沒訪問過的鏈接（正常的鏈接） -
a:visited訪問過的鏈接由于隱私的問題，所有 visited 這個偽類只能修改鏈接的顏色
-
a:hover滑鼠移入的狀態 -
a:active滑鼠點擊時的狀態
注意：link 和 visited 是 a 特有的偽類，而 hover 和 active 是所有元素都有的
-
偽元素選擇器
偽元素：表示頁面中一些特殊的并不真實的存在的元素（特殊的位置）
-
偽元素使用 :: 開頭
-
::first-letter表示第一個字母 -
::first-line表示第一行 -
::selection表示選中的內容 -
::before元素的開始 -
::after元素的最后before 和 after 必須結合 content 屬性使用
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/227097.html
標籤：Html/Css
上一篇：前端-CSS
下一篇：仿美團外賣的店鋪串列獲取思路