选择嵌套 div 中的表单元素答案

【问题标题】：Select the form element in nested div选择嵌套 div 中的表单元素
【发布时间】：2021-07-26 18:28:02
【问题描述】：

在下面的代码中，如何在 CSS 中选择表单元素（数字类型）？

<div id="alayeghh">
 <div class="backwrapper backwrappercolor">
  <div class="alayegh">
   <div class="container">
    <div class="onecolumns">
    <p class="description"> Hi </p></br>
    </div><!--description -->
     <div  class="two columns">
        <form action="" autocomplete="on" id=form2">
            <input type="number" id="markaz" name="f" min="0" max="10"><br><br>
        </form>
   </div>
  </div>
 </div>
</div>

【问题讨论】：

最简单的方法是#markaz { ... }
@Berci，我同意，但该样式仅适用于具有提供 ID 的元素。对于将应用于特定类型的所有输入元素的更通用样式，您应该查看我的答案。
@HC1122 这很大程度上取决于我们想要什么。如果他想为所有页面中的所有输入数字设置样式，我同意你的回答。如果他只想为特定表单设置样式，他可以对一个元素使用#markaz { ... }，# form2 input { ... } 选择表单内的所有输入，或者仅使用#form2 input[type=number] { .... } 选择表单内的数字输入字段。

标签： html css-selectors inner-classes

【解决方案1】：

你检查other solutions了吗？

你也可以这样做

form input[type=number] {
    background-color: red;
    width: 100%;
}

【讨论】：

【解决方案2】：

如果您的页面只包含一个form 和一个input number 元素，

您可以使用input[type=number] 选择它。

如果您使用的代码不止您发布的代码。将选择所有输入的数字元素。

如果您希望它们具有独特的样式，您可以使用它们的 id 来选择它们。例如：#markaz

你也可能想读这个。 Naming conventions in HTML

【讨论】：

你这里也有错别字
，加“