CSS選擇器的常見語(yǔ)法：

image

1. 根據(jù) 標(biāo)簽定位 tagName(定位的是一組，多個(gè)元素）

e.g：find_element_by_cssSelector("div")

2. 根據(jù) id屬性定位(注意id使用#表示）

e.g: find_element_by_cssSelector("#eleid")

e.g: find_element_by_cssSelector("div#eleid")

3. 根據(jù)className屬性定位（注意class屬性使用.)

e.g: find_element_by_cssSelector("div.eleclass")

4. 根據(jù)元素屬性定位

4.1 精確匹配：

e.g: find_element_by_cssSelector("div[name=elename]") #屬性名=屬性值，精確值匹配

e.g: find_element_by_cssSelector("a[href]") #是否存在該屬性，判斷a元素是否存在href屬性

注意：如果 class屬性值 里帶空格，用.來(lái)代替空格

4.2 模糊匹配

e.g: find_element_by_cssSelector("div[name^=elename]") #從起始位置開始匹配

e.g: find_element_by_cssSelector("div[name$=name2]") #從結(jié)尾匹配

e.g: find_element_by_cssSelector("div[name*=name1]") #從中間匹配，包含

4.3 多屬性匹配

e.g: find_element_by_cssSelector("div[type='eletype][value='elevalue']") #同時(shí)有多屬性

e.g: find_element_by_cssSelector("div.eleclsss[name='namevalue'] #選擇class屬性為eleclass并且name為namevalue的div節(jié)點(diǎn)

e.g: find_element_by_cssSelector("div[name='elename'][type='eletype']:nth-of-type(1) #選擇name為elename并且type為eletype的第1個(gè)div節(jié)點(diǎn)

5. 定位子元素 (A>B)

e.g: find_element_by_cssSelector("div#eleid>input") #選擇id為eleid的div下的所有input節(jié)點(diǎn)

e.g: find_element_by_cssSelector("div#eleid>input:nth-of-type(4) #選擇id為eleid的div下的第4個(gè)input節(jié)點(diǎn)

e.g: find_element_by_cssSelector("div#eleid>nth-child(1)") #選擇id為eleid的div下的第一個(gè)子節(jié)點(diǎn)

6. 定位后代元素 (A空格B)

e.g: find_element_by_cssSelector("div#eleid input") #選擇id為eleid的div下的所有的子孫后代的 input 節(jié)點(diǎn)

e.g: find_element_by_cssSelector("div#eleid>input:nth-of-type(4)+label #選擇id為eleid的div下的第4個(gè)input節(jié)點(diǎn)的相鄰的label節(jié)點(diǎn)

e.g: find_element_by_cssSelector("div#eleid>input:nth-of-type(4)~label #選擇id為eleid的div下的第4個(gè)input節(jié)點(diǎn)之后中的所有l(wèi)abel節(jié)點(diǎn)

7. 不為

e.g: find_element_by_cssSelector("div#eleid>*.not(input)") #選擇id為eleid的div下的子節(jié)點(diǎn)中不為input 的所有子節(jié)點(diǎn)

e.g: find_element_by_cssSelector("div:not([type='eletype'])") #選擇div節(jié)點(diǎn)中type不為eletype的所有節(jié)點(diǎn)

8. 包含Bycontent

e.g: find_element_by_cssSelector("li:contains('Goa')") # <li>Goat</li>

e.g: find_element_by_cssSelector("li:not(contains('Goa'))) # <li>Cat</li>

9. by index

e.g: find_element_by_cssSelector("li:nth(5)")

image

高階：

image

image

image