什麼可能是以下HTML源代碼的CSS選擇器

Question

<button id="createDropdown" class="btn-create" tabindex="7"> 
<ul id="createDropdownUl" class="dropdown-create" style="display: block"> 
<li tabindex="8"> 
<button>BOOK MASTER SERVICE </button> 
</li> 
<li tabindex="9"> 
<button> CREATE SCHEDULE</button> 
</li> 
</ul> 
</div> 

我想選擇帶有文本「CREATE SCHEDULE」的按鈕。表達式的xpath是;

//*[@id='createDropdownUl']/li[2]/button 

我試過下面的代碼。 ;

WebElement menuitem=driver.findElement(By.cssSelector("ul#createDropdownUl>li>button")); 

但它選擇兩個按鈕我只想通過CSS選擇器選擇第二個按鈕「CREATE SCHEDULE」。 。

Answer 1

attribute selector?

ul#createDropdownUl>li[tabindex="9"]>button 

，或者如果你想最後一個，你可以使用:last-child：

ul#createDropdownUl>li:last-child>button 

Answer 2

我認爲這將有助於爲您想要調用的按鈕分配一個ID，以便能夠單獨識別它們。

<button id="createDropdown" class="btn-create" tabindex="7"> 
    <ul id="createDropdownUl" class="dropdown-create" style="display: block"> 
    <li tabindex="8"> 
    <button>MASTER SERVICE BLOCK</button> 
    </li> 
    <li tabindex="9"> 
    <button id="MasterS">MASTER SCHEDULE</button> 
    </li> 
    </ul> 
    </div> 

然後

WebElement menuitem=driver.findElement(By.cssSelector("#MasterS")); 

Answer 3

在標準的CSS，這將是：

button button 

但是你必須要小心，它也可以選擇3其他頁，第4等。

也就是說，標準css中只有類和id以及它們的層次級別（父/子）關係不像xpath那樣沒有標準規範。

Answer 4

如果你是肯定tabindex屬性，那麼你可以使用attribute selector：

#createDropdownUl li[tabindex='9'] button { 
    font-weight: bold /*Sample CSS*/ 
} 

演示：http://jsfiddle.net/GCu2D/1171/

或者，如果你是肯定li元素的數量，你也可以使用：

#createDropdownUl li:nth-child(2) button{color:red;} 

演示：http://jsfiddle.net/GCu2D/1172/

Answer 5

您可以通過它瞄準的元素在CSS屬性：

#createDropdownUl li[tabindex="9"] button 

或者使用nth-child(x)選擇器：

#createDropdownUl li:nth-child(9) button 

在CSS中沒有其他方法，除非您給它一個ID。