CSS技术求助：如何单独调整单选/复选框关联文本的字号？

核心问题修正：HTML语法错误 #

你的代码里最关键的问题是input是自闭合标签，不能包裹文本内容——这也是你无法单独设置关联文本样式的根源。必须把单选/复选框的文本放到label标签内，并且通过for属性和对应的input的id绑定（注意每个单选按钮的id必须唯一，不能重复）。

针对性解决你的两个困惑 #

1. 修改#title影响全局的问题

你当前的HTML结构混乱（比如title标签里嵌套h1、head标签闭合错误），导致样式继承混乱。先把HTML结构梳理规范：h1#title应该放在body内，title标签只保留页面标题文本。

2. 单独缩小单选/复选框的关联文本

修正HTML结构后，给单选/复选框的label添加专属类名（比如.option-label），然后单独设置这个类的字体大小即可，不会影响全局文本样式。

修正后的完整代码 #

CSS代码

body {
  background-color: rgb(200, 200, 200);
}

#title {
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
}

#description {
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
}

/* 普通输入框的label样式 */
.form-label {
  font-family: sans-serif;
  font-size: 14px;
  display: block;
  text-align: center;
  margin: 10px 0 5px;
}

/* 单选/复选框的专属label样式，设置更小字体 */
.option-label {
  font-family: sans-serif;
  font-size: 12px; /* 可自行调整大小 */
  display: inline-block;
  margin: 5px 10px;
}

/* 仅针对普通输入框设置样式，不影响单选/复选框 */
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  font-family: sans-serif;
  font-size: 14px;
  display: block;
  margin: 0 auto 15px;
  padding: 5px;
}

/* 让单选/复选框和文本在一行显示 */
input[type="radio"],
input[type="checkbox"] {
  display: inline-block;
  margin: 0;
}

button#submit {
  display: block;
  margin: 20px auto;
  font-size: 16px;
  padding: 8px 16px;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <title>freeCodeCamp Survey Form</title>
</head>
<body>
  <h1 id="title">freeCodeCamp Survey</h1>
  <p id="description"><em>Thank you for taking the time to help us improve the platform</em></p>
  
  <fieldset>
    <form id="survey-form" action="submit_form.php" method="post">
      <!-- 普通输入框组 -->
      <label class="form-label" id="name-label" for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Jane Doe" required>
      
      <label class="form-label" id="email-label" for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="janedoe@gmail.com" required>
      
      <label class="form-label" id="number-label" for="age">Age (optional)</label>
      <input type="number" min="13" max="120" id="number" name="age" placeholder="23">
      
      <!-- 下拉选择框 -->
      <label class="form-label" for="role">What option best describes your current role?</label>
      <select id="role" name="role" required>
        <option value="">Please select one</option>
        <option value="student">Student</option>
        <option value="FTJ">Full Time Job</option>
        <option value="FTL">Full Time Learner</option>
        <option value="Prefer-not">Prefer Not To Say</option>
        <option value="Other">Other</option>
      </select>
      
      <!-- 单选按钮组 -->
      <label class="form-label">Would you recommend freeCodeCamp to a friend?</label>
      <label class="option-label" for="recommend-definitely">
        <input type="radio" id="recommend-definitely" name="recommend" value="definitely" checked> Definitely
      </label>
      <label class="option-label" for="recommend-maybe">
        <input type="radio" id="recommend-maybe" name="recommend" value="maybe"> Maybe
      </label>
      <label class="option-label" for="recommend-not-sure">
        <input type="radio" id="recommend-not-sure" name="recommend" value="not-sure"> Not sure
      </label>
      
      <!-- 功能选择下拉框 -->
      <label class="form-label" for="feature">What is your favorite feature of freeCodeCamp?</label>
      <select id="feature" name="feature" required>
        <option value="">Please select one</option>
        <option value="challenges">Challenges</option>
        <option value="projects">Projects</option>
        <option value="community">Community</option>
        <option value="open-source">Open source</option>
      </select>
      
      <!-- 复选框组 -->
      <label class="form-label" for="improvements">What would you like to see improved? (Check all that apply)</label>
      <label class="option-label" for="improve-frontend">
        <input type="checkbox" id="improve-frontend" name="improvements" value="front-end-projects"> Front-end projects
      </label>
      <label class="option-label" for="improve-backend">
        <input type="checkbox" id="improve-backend" name="improvements" value="back-end-projects"> Back-end projects
      </label>
      <label class="option-label" for="improve-dataviz">
        <input type="checkbox" id="improve-dataviz" name="improvements" value="data-visualization"> Data visualization
      </label>
      <label class="option-label" for="improve-challenges">
        <input type="checkbox" id="improve-challenges" name="improvements" value="challenges"> Challenges
      </label>
      <label class="option-label" for="improve-community">
        <input type="checkbox" id="improve-community" name="improvements" value="open-source-community"> Open-source community
      </label>
      
      <!-- 文本域 -->
      <label class="form-label" for="comments">Any comments or suggestions?</label>
      <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Please write any comments or suggestions here"></textarea>
      
      <!-- 提交按钮 -->
      <button id="submit" type="submit">Submit</button>
    </form>
  </fieldset>
</body>
</html>

关键说明 #

1. 结构规范：head标签仅存放元数据、样式链接和页面标题，body存放所有可见内容，避免样式继承混乱；
2. 样式分离：通过不同类名区分普通输入框和单选/复选框的label，实现独立样式控制；
3. 语法正确：所有单选/复选框的文本都嵌套在对应label内，for属性与input的id一一绑定，符合HTML规范；
4. 布局优化：调整CSS选择器，避免全局样式影响单选/复选框的行内布局。

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