父類中多個ID的CSS選擇器

Question

我正在尋找一種方法來針對具有CSS選擇器的父類中的多個不同ID。

我知道這樣做並不普遍，因為id需要唯一才能進行驗證，因此這種解決方案的實際用途有限。 我最初打算將此代碼用於學校項目。 從那以后，我找到了一個有效的解決方法，但我仍然想知道這是否可以實現，以及如何實現。

           <form class="example6">
                <div>
                    <h3>Contact form</h3>
                    <label>
                        <span>Your name</span><input  id="name" type="text" name="name" />
                    </label>

                    <label>
                        <span>Email Address</span><input id="email" type="text" name="email" />
                    </label>

                    <label>
                        <span>Subject</span><input  id="subject" type="text" name="subject" />
                    </label>

                    <label>
                        <span>Message</span><textarea  name="feedback"></textarea>

                    </label>
                 </div>
             </form>

我想選擇＃name，＃email和#subject，但前提是在.example6中。

Answer 1

后代選擇器是一種僅選擇祖先/父代（ parent child ）的parent child （無論它們是元素，類，ID等）的方式。選擇器之間用空格表示

.example6 #name {

}

您可以逗號分隔多個選擇器並應用相同的CSS

.example6 #name, .example6 #email, .example6 #subject {

}

jsFiddle演示

Answer 2

您可以使用此：

.example6 > div > label > input{
    border-color: red;
}

小提琴

Answer 3

嘗試這個：

.example6 #name, .example6 #email, .example6 #subject {
    ...
}

Answer 4

有幾種方法可以做到這一點。

您可以用逗號分隔多個表達式：

.example6 #name, .example6 #email, .example6 #subject {...}

或找到該元素唯一的其他內容（例如：它們是.example6中的唯一inputs ）

.example6 input{...}

或使用屬性選擇器僅獲取具有type = text的輸入：

.example6 input[type=text]{...}

http://jsfiddle.net/au0drh1w/