選擇使用CSS

Question

類名相同的多個元素所以我要的主頁上類似這樣的問題的列表：每次

<div id="question-summary-36771853" class="question-summary narrow"> 
<div id="question-summary-36772065" class="question-summary narrow"> 
<div id="question-summary-36772003" class="question-summary narrow"> 
<div id="question-summary-36772259" class="question-summary narrow"> 
<div id="question-summary-36772257" class="question-summary narrow"> 
<div id="question-summary-36772256" class="question-summary narrow"> 
<div id="question-summary-36772253" class="question-summary narrow"> 

現在的ID修改頁面被刷新。我想知道如何使用CSS選擇器捕獲前5個問題。

Answer 1

您可以使用「開始，以」部分匹配id或「包含」符號：

div[id^="question-summary-"] 

或者，您可以檢查類，而不是ID：

div.question-summary 

至於僅限於5個第一個元素，您可以使用selenium語言綁定的「findElements」方法並對結果進行分片。例如在Python：

questions = driver.find_elements_by_css_selector('div[id^="question-summary-"]') 
first_5_questions = questions[:5] 

Answer 2

如果你喜歡一個只基於CSS的方式做到這一點，你可以使用:nth-child僞選擇，只能選擇第5個元素。這是一個手動，但可以用CSS來實現，如下所示：

.question-summary:nth-child(1), 
.question-summary:nth-child(2), 
.question-summary:nth-child(3), 
.question-summary:nth-child(4), 
.question-summary:nth-child(5) { 
    /* your style goes here */ 
}