CSS - 将样式放在嵌套在元素中的输入上？答案

【问题标题】：CSS - Putting styles on inputs nested in elements?CSS - 将样式放在嵌套在元素中的输入上？
【发布时间】：2020-09-23 05:15:29
【问题描述】：

所以，愚蠢的问题，因为我的作业方向基本上是吐字。字面意思是呕吐。我需要为以下代码输入 CSS 代码：

   <fieldset class=deliveryinfo>
                <legend>Delivery Information:</legend>
                <label for="nameinput">Name</label>
                    <input type="text" id="nameinput" name="name"><br><br>
                <label for="addressinput">Street Address</label>
                    <input type="text" id="addressinput" name="address"><br><br>
                <label for="cityinput">City</label>
                    <input type="text" id="cityinput" name="city"><br><br>
                <label for="emailinput">Email</label>
                    <input type="text" id="emailinput" name="email"><br><br>
                <label for="phoneinput">Phone</label>
                    <input type="text" id="phoneinput" name="phone"><br><br>
        </fieldset>

对于输入/文本标签，方向状态：

对于具有类值deliveryinfo的元素中的输入元素和textarea元素，使用颜色#ccc创建一个1px的实心边框，所有边的填充为0.2em，并将字体大小设置为1em。对于类值为deliveryinfo的元素内的输入元素，将元素绝对定位在距左侧8em处

我会做类似.deliveryinfo nameinput {} .deliveryinfo cityinput {} .... 并继续使用列出的样式吗？谢谢。

【问题讨论】：

请在 nameinputin 和 cityinput 中添加#，它是 id .deliveryinfo nameinput {} .deliveryinfo cityinput {}

标签： html css

【解决方案1】：

您可以在一个中创建通用样式，在另一个中创建自定义样式，从而使代码更简洁。试试这个

    .deliveryinfo input,
    .deliveryinfo textarea {
        border: 1px solid #ccc;
        padding: 0.2em;
        font-size: 1em;
    }

    .deliveryinfo input {
        position: absolute;
        margin-left: 8em;
    }

【讨论】：

【解决方案2】：

您问题的“我会做什么”部分缺少的是#，表示您正在引用标签的id。

.deliveryinfo #nameinput {
   color: red;
}

.deliveryinfo #addressinput {
   color: purple;
}

.deliveryinfo #cityinput {
   color: orange;
}

.deliveryinfo #emailinput {
   color: blue;
}

.deliveryinfo #phoneinput {
   color: pink;
}

   <fieldset class=deliveryinfo>
                <legend>Delivery Information:</legend>
                <label for="nameinput">Name</label>
                    <input type="text" id="nameinput" name="name"><br><br>
                <label for="addressinput">Street Address</label>
                    <input type="text" id="addressinput" name="address"><br><br>
                <label for="cityinput">City</label>
                    <input type="text" id="cityinput" name="city"><br><br>
                <label for="emailinput">Email</label>
                    <input type="text" id="emailinput" name="email"><br><br>
                <label for="phoneinput">Phone</label>
                    <input type="text" id="phoneinput" name="phone"><br><br>
        </fieldset>

【讨论】：

很高兴为您提供帮助:)