一、什麼是選擇器/選擇符?
在 css 中,選擇器是一種模式,通過選擇器 ,我們可以選擇到相應的元素。對齊新增樣式。
二、選擇器/選擇符 分類 序號
大類示例說明①
通配選擇器(全域性選擇器)
*指的是所有標籤元素
不要輕易使用這個選擇器,比較消耗效能,那我們是怎麼初始化邊距的??? ②
元素選擇器
p指的是某個標籤元素
③class型別選擇器
.classname
指的是class名為classname的元素,可以是多個
④id選擇器
#idname
指的是class名為idsname的元素,只可以是乙個,因為id是唯一的,即使誤操作也只能選擇到第乙個元素
⑤屬性選擇器
略簡單屬性選擇器,具體屬性值選擇器,部分屬性選擇器,開始子串屬性值選擇器,結束子串屬性值選擇器,任意子串屬性值選擇器,語言屬性選擇器
⑥偽類與為元素選擇略
偽類:通過選擇器可以選擇到一類元素,可能是0個,1個,多個,
偽元素:通過選擇器可以選擇到乙個元素,例如:after :before :first-letter :first-line
⑦組合選擇器
略
組合選擇器就是多個選擇器組合使用,是前面 幾種 選擇器的聯合使用
簡單組合選擇器:後代選擇器,子選擇器,相鄰兄弟選擇器,後續選擇器
複雜組合選擇器:這個很多,具體學習
*
萬用字元使用在組合選擇器,
**:
div * p
p
pppp,不變色
pppp紅色
pppp
aaaaa紅色
結果:
pppp,不變色
pppp紅色
pppp
結果:
例如: a[rel] 說明:存在rel屬性的a元素
例如: p[class] 說明:存在屬性class的p元素
例如: a[rel="home"] 說明:存在rel屬性,且屬性值為home的a元素
例如: input
[type="
text
"]{}
例如:input
[type="
button
"]{}
例如:a
[rel~="home"] 說明:rel屬性的值裡面,包含有home ,那麼這個a元素就會被選上
**:
pppp
pppp
pppp變色
pppp,不包含red,不變色
pppp,包含red變色
pppp不變
結果:
例如:img[title^="figure"] 說明:title屬性的屬性值的開頭的字串為/figure 的img元素
例如:img[src$=".gif"] 說明:src屬性的屬性值的結尾的字串為.gif 的img元素
例如:img[src*="/img"] 說明:src屬性的屬性值的任意的字串為/img 的img元素
⑦ 語言屬性選擇器:
例如:html[lang |="en"] 選擇到語言為英文的html頁面
見另外一篇文章:偽類/偽元素選擇符/選擇器 深入了解
偽類:通過選擇器可以選擇到一類元素,可能是0個,1個,多個,
偽元素:通過選擇器可以選擇到乙個元素,例如:after :before :first-letter :first-line
見另外一篇文章:組合選擇器深入了解
組合選擇器就是多個選擇器組合使用,是前面 幾種 選擇器的聯合使用
簡單組合選擇器:後代選擇器,子選擇器,相鄰兄弟選擇器,後續選擇器
複雜組合選擇器:這個很多,具體學習
CSS選擇器Selector或選擇符學習筆記
1.css選擇符學習方法及用途 根據css參考手冊學習css選擇符,建議採用分類進行學習總結。css選擇符一方便用於css程式設計,另一方面在爬蟲中使用較多。注 爬蟲中選擇某個特定標籤,可以根據正規表示式 beautifulsoup css選擇器 xpath等方法獲取,其中css選擇器使用也是比較多...
比較全面的 CSS 選擇器總結
與任何元素匹配 e e 表示 html 的元素名 div first letter 對指定物件內的第乙個字元起作用,僅對塊元素起作用 first line 對指定物件內的第一行內容起作用,僅對塊元素起作用 before afte e attr 表示針對具有 attr 屬性的 e 元素起作用 div ...
深入了解示波器(八) 如何選擇示波器
建議先看完我的系列文章深入了解示波器 一 七 第1步選擇頻寬 需要知道平時測量什麼訊號,頻率多少,根據深入了解示波器 三 示波器的頻寬提供的公式和 計算即可,一般用 5倍法則 即頻寬大於訊號頻率成分的5倍。精確一點就用 計算。如果要測試usb訊號,usb訊號的頻率是200mhz差分訊號,建議選擇頻寬...