Build a Job Application Form - Build a Job Application Form

告诉我们发生了什么:

请帮帮我,我反复观看别人的代码,修改了很多次,但它始终无法通过。我仍然无法察觉我代码的错误之处。明明看上去代码都是正确的,没有未闭合标签,但就是无法通过测验。甚至我摘选了示例项目的代码挪动到我的编辑器中,并尽可能保证和示例项目的代码段样式一致,但它仍然无法通过测验,我都要崩溃了。我也尝试过使用别人通过的代码,我尽量将自己的元素和属性保持一致,和别人代码保持高度相似,但仍然无法通过。反而别人的代码粘贴上就立刻通过。

下面是报错的控制台,我知道第18项目任务我无法完成,无法通过测验能理解。但其他项目无法理解为什么无法通过测验:
6. You should have a fieldset or section element with the class .radio-group.
7. Inside .radio-group you should have a group of input elements with the type radio for selecting availability options. The group name should be availability.
8. You should have a textarea element with the id message for entering a message.
10. You should have a button element with the type submit for submitting the form.
18. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
// 测试完成

到目前为止你的代码

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
    <link rel="stylessheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Full name:</label>
            <input type="text" id="name" name="name" placeholder="Enter your name" required/>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required/>
            <label for="position">Position:</label>
            <select id="position" required="">
                <option value="">Select a position</option>
                <option value="developer">Developer</option>
                <option value="manager">Manager</option>
                <option value="designer">Designer</option>
            </select>
        </form>
        
        <fieldset class="radio-group">
            <legend>Availability:</legend>
            <label for="full-time" class="radio-label" >Full-Time<input type="radio" id="full-time" name="availability" class="radio-group-btn" checked=""/></label>
            <label for="part-time" class="radio-label">Part-Time<input type="radio" id="part-time" name="availability" class="radio-group-btn"/></label>
        </fieldset>

        <label for="message">Why do you want this job?</label>
        <textarea id="message" name="message" rows="5" placeholder="Write your motivation" required=""></textarea>

        <button type="submit" class="submit-btn">Submit</button>
        <button type="reset" class="reset-btn">Reset</button>
    </div>
</body>
</html>
/* file: styles.css */
body{
  font-family:Arial, sans-serif;
}

.container{
  color:black;
  background:rgba(255,255,200,0.5);
  width:70%;
  max-width:600px;
  margin:20px auto;
  padding:10px 30px;
  box-shadow:0 3px 5px gray;
  border-radius:10px;
}

h1{
  text-align:center;
  font-size:1.7rem;
  color:brown;
}

label:not(.radio-group .radio-label){
  display:block;
}

select{
  background-color:whitesmoke;
}

fieldset legend,label:not(.radio-label){
  font-weight:600;
  font-size:0.8rem;
}

.radio-group{
  border-radius:5px;
  border:1px solid brown;
  margin-bottom:px;
}


input:not(.radio-group-btn),textarea,select{
  width:100%;
  margin-bottom:15px;
  padding:10px;
  border-radius:5px;
  box-sizing:border-box;
}
input:first-of-type{
  background-color:yellow;
}

input:focus,textarea:focus{
  border:1px solid brown;
  outline:none;
}

input:invalid,select:invalid,textarea:invalid{
  border:1px solid red;
}

input:valid,select:valid,textarea:valid{
  border:1px solid green;
} 

button{
  border:none;
  border-radius:5px;
  color:whitesmoke;
  width:100%;
  margin-bottom:8px;
  padding:5px;
  font-size:1.1rem;
}
.submit-btn{
  background-color:brown;
}
.reset-btn{
  background-color:grey;
}

button:hover{
  background-color:black;
}

.radio-group input[type="radio"]:checked{
  appearance: none;
  border-color: brown;
  background-color: brown;
  box-shadow: inset 0 0 0 2px white;
  margin-top: 16px;
  border-radius: 50%;
  height: 14px;
  width: 14px;
}

你的浏览器信息:

用户代理是: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

挑战信息:

Build a Job Application Form - Build a Job Application Form

thsi should be inside the form element

Your closing form tag should nest all of the form elements by being placed after the button elements.

This has not been handled yet in your CSS. It will be easier to handle if you place your radio buttons before their labels in your HTML. You can refer to this reference for the syntax:

MDN: Next Sibling Combinator

thank you very much!