在 html 表单上使用 id 的样式无效

Question

知道为什么当我在表单标签上使用 id 时样式无效但在将 id 替换为 class

后它变得有效

    <form id="contact-form">
            <label>Subject</label>
            <input class="input-field" type="text" name="subject">
            <label>Email</label>
            <input class="input-field" type="text" name="email">
            <label>Message</label>
            <input id="submit-button" type="submit" value="Send">
    </form>

 

    #contact-form{
display: block
}

Answer 1

它正在应用于 form 并显示为 block 但您似乎希望 form child elements 显示 block 所以使用 * 和 #contact-form

#contact-form * {
  display: block
}

<form id="contact-form">
  <label>Subject</label>
  <input class="input-field" type="text" name="subject">
  <label>Email</label>
  <input class="input-field" type="text" name="email">
  <label>Message</label>
  <input id="submit-button" type="submit" value="Send">
</form>

并且 form 标签是 block-level 元素，但 input label 不是。
您可以通过将其他属性应用于 id

来查看

#contact-form {
  display: block;
  background-color: red;
}

<form id="contact-form">
  <label>Subject</label>
  <input class="input-field" type="text" name="subject">
  <label>Email</label>
  <input class="input-field" type="text" name="email">
  <label>Message</label>
  <input id="submit-button" type="submit" value="Send">
</form>

在 html 表单上使用 id 的样式无效

Styling using id on html form not effective

html

css

class

styling

responsive-design