求助：仅用HTML和CSS实现表单选择修改h1属性无效

问题原因分析 #

你的代码无法生效的核心问题是CSS选择器逻辑错误：

• option:checked~h1 中的~是同级兄弟选择器，仅能匹配当前元素之后的同级元素，但<option>是<select>的子元素，和<h1>既不同级，位置还在h1之前，完全无法匹配。
• 浏览器不能直接通过子元素（option）的状态触发外部元素（h1）的样式变化，需要借助:has()选择器来检测父容器内的选中状态。

修复后的代码 #

CSS 代码

h1 {
  margin: 0;
  padding: 0;
  margin-top: 100px;
}

table {
  border: 3px double;
  border-collapse: collapse;
}

th {
  border-bottom: 3px double;
}

/* 控制文字颜色 */
center:has(#text option[value="red"]:checked) h1 {
  color: red;
}
center:has(#text option[value="blue"]:checked) h1 {
  color: blue;
}

/* 控制文字阴影 */
center:has(#shadow option[value="red"]:checked) h1 {
  text-shadow: 2px 2px 5px rgba(255, 0, 0, 0.5);
}
center:has(#shadow option[value="blue"]:checked) h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 255, 0.5);
}

/* 控制背景色 */
center:has(#background option[value="silver"]:checked) h1 {
  background-color: silver;
}
center:has(#background option[value="gold"]:checked) h1 {
  background-color: gold;
}

HTML 代码（无需修改）

<center>
  <h1>Hello World</h1>
  <table>
    <tr>
      <th colspan="2">parameters</th>
    </tr>
    <tr>
      <td><label for="text">text</label></td>
      <td>
        <select id="text" name="text">
          <option value="red">red</option>
          <option value="blue">blue</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="shadow">shadow</label></td>
      <td>
        <select id="shadow" name="shadow">
          <option value="blue">blue</option>
          <option value="red">red</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="background">background</label></td>
      <td>
        <select id="background" name="background">
          <option value="silver">silver</option>
          <option value="gold">gold</option>
        </select>
      </td>
    </tr>
  </table>
</center>

说明 #

• :has()选择器会检测<center>容器内，对应id的<select>是否选中了指定value的<option>，如果满足条件就给容器内的<h1>应用对应样式。
• 该方案支持Chrome、Firefox 121+、Safari等现代主流浏览器。

内容的提问来源于stack exchange，提问作者Kevin Balean