今天我給大家介紹另外2個(gè)選擇器的使用：后代選擇器、屬性選擇器及其進(jìn)階用法。

大家也可以自己打開(kāi)瀏覽器的開(kāi)發(fā)者工具，跟著下面的例子去實(shí)踐。

后代選擇器

如下圖所示，有a、div、img三個(gè)元素。從網(wǎng)頁(yè)結(jié)構(gòu)得知，div是a元素的子元素，而img元素又是div的子元素。好比，a元素是爺爺，div是爸爸，img是兒子。

如果我們需要選擇（定位）圖里面的img元素，可以輸入選擇器：a?div?img

后代選擇器：使用1個(gè)空格（“??“）將每個(gè)選擇器隔開(kāi)。例如以下幾種選擇器表示：

a?div——選擇a元素下的所有div元素。

a?img——選擇a元素下的所有img元素

div?img——選擇div元素下的所有img元素

a?.s-image——選擇a元素下，所有類的值是s-image的元素

屬性選擇器

如下圖所示，標(biāo)記1、2、3的div元素都含有不同的屬性。

如果要選擇序號(hào)1的div元素，選擇器可以填：[data-asin="B0BQ72RJ48"]，或者填：[data-ndex="7"]。因?yàn)榫蛨D片里顯示的這塊區(qū)域，這兩個(gè)屬性是唯一的，能保證我們定位到序號(hào)1的div元素。

屬性選擇器就是用"[?]"把屬性包起來(lái)。一般我們會(huì)挑比較好填寫的屬性。類似圖中的data-uuid="XXX"屬性，太長(zhǎng)了，一般很少用。

類也是一種屬性，如果我們要選擇序號(hào)2的div元素，選擇器除了填?.sg-col-inner，也可以填：[class="sg-col-inner"]

那如果我們要用屬性選擇器，來(lái)選擇序號(hào)3的div元素，是否可以呢？

也可以，但是選擇器同樣是太長(zhǎng)了。這么長(zhǎng)~~~~~~~~~~~~的選擇器，真的沒(méi)必要用：

[class="s-card-container?s-overflow-hidden?aok-relative?puis-wide-grid-style?puis-wide-grid-style-t2?puis-expand-height?puis-include-content-margin?puis?puis-v1x9gmlfr6jq0x2bxg28d4mmie9?s-latency-cf-section?s-card-border"]

在RPA里面，一般不用這么累贅的選擇器，可以用更簡(jiǎn)單的方法，下面會(huì)介紹更方便的選擇器。

屬性選擇器的進(jìn)階用法

還是以這圖為例，如果我們要用屬性選擇器選擇序號(hào)3的元素，選擇器會(huì)很長(zhǎng)，而且不方便后續(xù)的維護(hù)。因?yàn)閷傩灾道锩娴挠行┲岛芸赡軙?huì)變。一旦屬性值變了，輸入的選擇器就無(wú)法定位到該元素了。RPA有可能無(wú)法正常運(yùn)行。

那么還有沒(méi)有更簡(jiǎn)單的方法呢？當(dāng)然有啦?。?/p>

我們看序號(hào)3div元素的屬性：

class="s-card-container?s-overflow-hidden?aok-relative?puis-wide-grid-style?puis-wide-grid-style-t2?puis-expand-height?puis-include-content-margin?puis?puis-v1x9gmlfr6jq0x2bxg28d4mmie9?s-latency-cf-section?s-card-border"

在屬性值里，s-card-container、s-overflow-hidden、s-card-border等這些值看上去比較規(guī)范，不像是一堆亂碼，網(wǎng)頁(yè)的開(kāi)發(fā)者應(yīng)該不會(huì)隨意更改這部分的值。于是我們可以填這樣的選擇器：

[class*="s-card-container"]或[class*="s-card-border"]

語(yǔ)法就是：[屬性*=“字符串”]

序號(hào)3的div元素中，class這個(gè)屬性值里面有很多字符串，但是我們只需要找其中一些字符串，能幫助我們定位到該元素就行。也就是大家可以用這種用法，利用屬性值里面的一些關(guān)鍵詞去定位元素。

這個(gè)用法幾乎能幫你定位到絕大部分的元素。

課后作業(yè)

打開(kāi)amazon.com，輸入watch，看看能否用選擇器定位到第5個(gè)搜索結(jié)果的標(biāo)題。大家也可以自己給自己出題，定位某個(gè)按鈕，圖片。檢驗(yàn)自己是否真正掌握到了Tool哥講的選擇器。