選擇符 選擇器 深入了解 全面的選擇器學習

2021-08-21 07:16:53 字數 2478 閱讀 6249

一、什麼是選擇器/選擇符?

在 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差分訊號,建議選擇頻寬...