常用 CSS 選擇器

2022-07-13 07:03:08 字數 1393 閱讀 3063

// css 讀取順序從右到左,符合要求的都會匹配

// 萬用字元選擇器 -- 選擇所有元素

*// 萬用字元選擇器 -- 選擇某個元素下的所有元素

.demo *

// 元素選擇器

html,body,p,div等等

// 類選擇器 -- 使用類選擇器之前需要在html元素上定義類名

.classname

// 類選擇器還可以結合元素選擇器 -- 匹配類同時匹配元素

p.items

// 多類選擇器 -- 注意,有乙個不存在將無法找到該元素 -- ie6不支援

.important.items

// id 選擇器 -- 1.全域性唯一 2.乙個元素只能命名乙個id

#id// 後代選擇器 -- 選擇e元素的後代元素f(不管兒子還是孫子)

e f// 子元素選擇器 -- ie6不支援

e > f

// 相鄰兄弟元素選擇器 -- 同級目錄且 e 後邊緊鄰的 f(不含 e)

e + f

// 通用兄弟選擇器 -- css3增加,同級目錄下 e 後邊所有 f(不含 e) -- ie6不支援

e ~ f

// 群組選擇器(逗號隔開不同規則)

.first, .last

// 所有父元素下第乙個元素(以 body 作為根父節點)

:first-child

// 父元素下第乙個且為 p 的元素

p:first-child

// 父元素下第二個且為 p 的元素

p:nth-child(2)

// 同上,從最後乙個子元素開始計數

p:nth-last-child(2)

// 父元素最後乙個且為 p 的元素

p:last-child

// 父元素下第二個 p 元素

p:nth-of-type(2)

// 同上,但是從最後乙個子元素開始計數

p:nth-last-of-type(2)

// 父元素最後乙個 p 元素

p:last-of-type

// 與子元素選擇器組合 -- 只匹配 e 元素子目錄下且最後位置為 p 的元素

e > p:last-child

// 與後代選擇器組合 -- 匹配 e 元素子目錄、子子目錄裡且最後位置為 p 的元素

e p:last-child

// 選擇其 src 屬性值以 "https" 開頭的每個 元素

// 選擇其 src 屬性以 ".pdf" 結尾的所有 元素

a[src$=".pdf"]

// 選擇其 src 屬性中包含 "abc" 子串的每個 元素

a[src*="abc"]

參考:

CSS常用選擇器

class 選擇器 選擇並設定 class intro 的元素的樣式 intro id選擇器 為 id firstname 的元素設定樣式 firstname 標籤選擇器 選擇並設定所有 元素的樣式 p並集選擇器 使用 逗號 連線兩個選擇器 選擇並設定所有 樣式和所有 元素的樣式 h1,p 後代選擇...

CSS 常用選擇器

選擇器是指通過一定的語法規則選取到對應的html標記,然後給這個對應的html標記設定樣式 1.標籤選擇器 寫法 標籤名 標籤選擇器影響範圍大,一般用來做一些通用設定,或用在層級選擇器中。舉例 div 這是第乙個div 這是第二個div 2.類選擇器 寫法 類名 通過類名來選擇元素,乙個類可應用於多...

css常用選擇器

css 層疊樣式表 作用 美化html 行內式 css選擇器 外鏈式為單獨書寫的乙個css檔案,內容類似內嵌式,但是沒有內嵌式的外部標籤 如下 標籤選擇器 p color darkseagreen font family 楷體 font weight 200 id選擇器 id color india...