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

时间:2014-01-29 16:18:51

标签: html css

我有两个标签

元素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验证每个元素的文本。

3 个答案:

答案 0 :(得分:3)

您可以尝试:

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/

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

答案 1 :(得分:-1)

试试这个:

.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)等等。

答案 2 :(得分:-1)

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