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

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

首先，spanclass=' knx-field-error‘将选择具有knx字段错误类的所有跨度。由于您有两个跨类型的knx字段错误，CSS将选择两者。如果要单独选择它们，则需要在每个跨度中添加一个唯一的id。然后，您可以使用这个CSS选择器：#idname来选择任何一个span。