html - 如何使用 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/

而且您几乎可以选择所有想要的元素。