html - 父类中多个 id 的 CSS 选择器

标签 html css

我正在寻找一种使用 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 中。

最佳答案

A descendant selector是一种仅选择祖先/父代(parent child)的子代的方法,无论它们是元素、类、ID 等。选择由选择器之间的空格表示

.example6 #name {

}

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

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

}

jsFiddle Demo

关于html - 父类中多个 id 的 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25752345/

相关文章:

html - 制作垂直列表,并在元素之间放置一些东西

html - css3子菜单的子菜单移动到父级的底部

jquery - 在向上滚动和向下滚动时向菜单添加底部框阴影

javascript - HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件?

html - Chrome 和 Firefox/IE (Joomla) 之间的填充/边距差异的原因?

html - 如何使用 Bootstrap 创建响应式输入和按钮

javascript - 输入焦点的浏览器自动填充问题

javascript - 我试图在页面加载时隐藏一个段落,然后执行显示/隐藏 jquery 并更改按钮名称 onclick

javascript - 如何避免选择框上的ajax结果

css - 使用CSS切换元素顺序