选择使用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 */ 
}