在 html 表单上使用 id 进行样式设置无效答案

【问题标题】：Styling using id on html form not effective在 html 表单上使用 id 进行样式设置无效
【发布时间】：2021-11-27 10:37:55
【问题描述】：

知道为什么当我在表单标签上使用 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
}

【问题讨论】：

页面中是否有另一个带有那个（contact-form）ID 的元素？
这是唯一具有该特定 id 的标签

标签： html css class responsive-design styling

【解决方案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>

【讨论】：

嗯，它现在可以工作了，但样式不相似（与 class="contact-form" 的样式不同）
它与`class="contact-form"`@JumbaMark 有何不同
成功了。谢谢
如果它对您的问题有帮助，您可以将答案标记为已接受 @JumbaMark。如果您有任何疑问，请随时发表评论