CSS可以访问由标签标识的输入元素的属性吗？

Question

假设for的{​​{1}}属性标识label。我想根据input的{​​{1}}属性设置label的样式。如果它们相邻则很容易：使用相邻的兄弟选择器。但我更愿意遵循value的{​​{1}}属性。可能的？

Answer 1

简而言之 - 不。

我能想象你正在描述的唯一方法就是你提到的 - 通过使用相邻的选择器/兄弟选择器。您需要撤消<label>和<input>的典型html顺序，以允许选择器input ~ label起作用。

.field-container {
  display: flex;
  flex-direction: column-reverse;
  font-family: "Menlo", "Consolas", monospace;
}

input:focus ~ label {
  color: darksalmon;
}

<div class="field-container">
  <input id="cool-input" name="cool-input" />
  <label for="cool-input">Cool Input</label>
<div>