CSS - 將 styles 放在嵌套在元素中的輸入上？

Question

所以，愚蠢的問題，因為我的作業方向基本上是嘔吐詞。 字面意思是嘔吐。 我需要為以下代碼輸入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>

對於輸入/文本標簽，方向 state：

對於 deliveryinfo 值為 class 的元素中的 input 元素和 textarea 元素，使用顏色 #ccc 創建一個 1px 實心邊框，所有邊距為 0.2em，並將字體大小設置為 1em。 對於具有 class 值 deliveryinfo 的元素內的 input 元素，絕對 position 從左邊算起 8em 的元素

我會做類似.deliveryinfo nameinput {}.deliveryinfo cityinput {} .... 並繼續列出的 styles 嗎？ 謝謝。

Answer 1

您可以在一個中創建通用的 styles，在另一個中創建自定義的，從而使代碼更清晰。 試試這個

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

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

Answer 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>