Question

我有两个标签

元素A

  <div class="knx-field-group">
     <label for="ctl00_cphMainContent_tbFirstName">
     <span class="knx-field">
        <input id="ctl00_cphMainContent_tbFirstName" class="knx-field-text" type="text" maxlength="50" name="ctl00$cphMainContent$tbFirstName">
     </span>
     <span class="knx-field-error">Required Field</span>
  </div>

元素B

  <div class="knx-field-group">
     <label for="ctl00_cphMainContent_tbLastName">
     <span class="knx-field">
         <input id="ctl00_cphMainContent_tbLastName" class="knx-field-text" type="text" maxlength="50" name="ctl00$cphMainContent$tbLastName">
     </span>
     <span class="knx-field-error">Required Field</span>
  </div>

如何使用CSS查找每个标签的唯一标识符？我是CSS初学者，所以这可能是一个简单的解决方案。目前我正在尝试span[class=knx-field-error"]，但它会选择两个标签。

我的目标是使用webdriver验证每个元素的文本。

Answer 1

您可以尝试：

label[for=ctl00_cphMainContent_tbFirstName] ~ .knx-field-error {
  /* Styles for first example. */
}

label[for=ctl00_cphMainContent_tbLastName] ~ .knx-field-error {
  /* Styles for second example. */
}

只需学习一些类似CSS的高级选择器：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

你几乎可以选择你想要的所有元素。

Answer 2

试试这个：

.knx-field-group:first-child .knx-field-error{
    // css here
}

.knx-field-group:nth-child(2) .knx-field-error{
    // another css here
}

您还可以:nth-child(even)，:nth-child(odd)等等。

Answer 3

首先，span [class ='knx-field-error']将选择具有knx-field-error类的所有跨距。由于你有两个带有一类knx-field-error的跨度，CSS会选择两者。如果要单独选择它们，则需要为每个范围添加唯一ID。然后，您可以使用此CSS选择器选择任一span：#idname。

如何使用CSS为类查找唯一标识符

3 个答案: