css - 使用 CSS 定位第一个标签

Question

我正在设计一个门户，除了 CSS 之外我无法更改任何 HTML，并且遇到了以下代码，我想定位第一个标签(您的名字)。

<form class="no-tables" name="" action="" method="post">
    <div>
        <input type="hidden" name="" value="1">
        <label>Your Name</label>
        <label>Your Age</label>
    </div>
</form>

我尝试了 V 形选择器和第一个子选择器，但似乎都不起作用。

Answer 1

尝试使用first-of-type:

/* CSS3 */
form.no-tables > div > label:first-of-type {
  background: red;
}

/* or with CSS2 */
form.no-tables > div > input + label {
  border: 1px solid black;
}

<form class="no-tables" name="" action="" method="post">
  <div>
    <input type="hidden" name="" value="1">
    <label>Your Name</label>
    <label>Your Age</label>
  </div>
</form>