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

descendant selector是一种只选择祖先/父级（parent child）的子项的方法，无论它们是元素，类，ID等。选择由选择器之间的空格表示

.example6 #name {

}

您可以使用逗号分隔多个选择器并应用相同的CSS

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

}

jsFiddle Demo

Answer 2

您可以使用：

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

fiddle

Answer 3

试试这个：

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

Answer 4

有几种方法可以做到这一点。

您可以用逗号分隔多个表达式：

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

或找到该元素独有的其他内容（例如：它们是inputs中唯一的.example6）

.example6 input{...}

或使用属性选择器来获取type = text：

的输入

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

http://jsfiddle.net/au0drh1w/

父类中的几个id的CSS选择器

4 个答案: