CSS選擇器小結(python使用css方式定位)

2021-08-18 12:39:20 字數 2078 閱讀 1283

學習python寫爬蟲的時候,遇到css定位問題,故小結一下css選擇器定位的方式

萬用字元選擇器:

*
匹配所有class = 『important』

*.important
去掉前面萬用字元也是一樣的。

匹配所有p標籤下class = 『important』

p.important
匹配class = 『important warning』,類名中存在空格分開的情況

.important.warning

匹配所有id = 『intro』

#intro

匹配所有屬性是title

*[title]
匹配所有a標籤下屬性名是href

a[href]
多屬性匹配

a[href][title]
xml文件也可以實行屬性匹配器

planet[moons]

匹配a標籤下href = 『    』

a[href=""]
匹配多屬性值的情況

a[href=""][title="w3school"]
xml文件也可以實行『屬性 』和 『值』 進行匹配器

planet[moons="1"]

使用『~』,匹配多個p標籤下class名中含有『important』

p[class~="important"]

下表是對這些選擇器的簡單總結:

型別描述

[abc^="def"]

選擇 abc 屬性值以 "def" 開頭的所有元素

[abc$="def"]

選擇 abc 屬性值以 "def" 結尾的所有元素

[abc*="def"]

選擇 abc 屬性值中包含子串 "def" 的所有元素

匹配a標籤下,所有href 中,包含 『w3school.com.cn』的鏈結

a[href*="w3school.com.cn"]
匹配所有lang屬性下以『en』或以『en-』開頭的所有元素,例如:『en』,『en-us』,『en-au』,不適用『enen』

*[lang|="en"]
選擇器

描述[attribute]

用於選取帶有指定屬性的元素。

[attribute=value]

用於選取帶有指定屬性和值的元素。

[attribute~=value]

用於選取屬性值中包含指定詞彙的元素。

[attribute|=value]

用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。

[attribute^=value]

匹配屬性值以指定值開頭的每個元素。

[attribute$=value]

匹配屬性值以指定值結尾的每個元素。

[attribute*=value]

匹配屬性值中包含指定值的每個元素。

後代選擇器(descendant selector)又稱為包含選擇器。

匹配的所有元素,兩個元素間隔可以是無限的

h1 em

只匹配的多有元素,兩個元素間不能有間隔

h1 > strong
匹配table標籤下class = company,此類結構的所有元素

hello

table.company td > p
匹配相同父標籤下,h1和p的所有元素

h1 + p
注:h1和p必須由相同的父標籤

html > body table + ul

匹配第乙個p標籤或第乙個li標籤

p:first-child 

li:first-child

匹配所有p標籤下,第乙個li標籤

p > i:first-child
匹配第乙個p標籤下的所有li標籤

p:first-child i

css選擇器 小結

coding utf8 css selector info 選擇 class intro 的所有元素 name 選擇 id name 的所有元素 所有元素 div 選擇所有div div,p 選擇所有div和p div p 選擇div內部的p div p 選擇父元素為 元素的所有 元素 div p ...

CSS選擇器小結

基礎選擇器包括三種 html標籤選擇器,class選擇器和id選擇器三種。html標籤選擇器的使用 直接寫出html標籤名,例如 p 代表將文件中所有的p元素內部的文字渲染成紅色。class選擇器 加class名,例如 class id選擇器 加id名,例如 id 綜合選擇器,顧名思義就是將基礎選擇...

CSS的選擇器小結

css中的選擇器分為標籤選擇器 類選擇器和id選擇器 p.類選器名稱在使用類選擇器前先要為標籤設定乙個類,如 id選擇器 類似於類選擇器,不同的是id選擇器是唯一的,格式為 id選器名稱id選擇器同樣需要設定乙個id,如 選擇器是有 輩分關係 的,一代套著一代 子選擇器 子選擇器是父子關係,頗象是大...