CSS第一个孩子绝对不能工作
CSS第一个孩子绝对不能工作
提问于 2018-08-17 22:37:22
我有这些html元素：
.form-group:first-child {
display: none;
}
#form-group:first-child {
display: none;
}
#my-form #form-group:first-child {
display: none;
}
#my-form .form-group:first-child {
display: none;
}<form id="my-form">
<div class="form-group" id="form-group">first</div>
<div class="form-group" id="form-group">second</div>
<div class="form-group" id="form-group"></div>
<div class="form-group" id="form-group"></div>
<div class="form-group" id="form-group"></div>
<div class="form-group" id="form-group"></div>
<div class="form-group" id="form-group"></div>
<div class="form-group" id="form-group"></div>
<div class="form-group" id="form-group"></div>
<div class="form-group" id="form-group"></div>
</form>
这些都不起作用，我到底做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-17 22:42:28
首先，ID应该是唯一的，但是
#my-form .form-group:first-child {
display: none;
}无论如何，..will都可以工作
#my-form .form-group:first-child {
display: none;
}<form id="my-form">
<div class="form-group" id="form-group">1</div>
<div class="form-group" id="form-group">2</div>
<div class="form-group" id="form-group">3</div>
<div class="form-group" id="form-group">4</div>
<div class="form-group" id="form-group">5</div>
<div class="form-group" id="form-group">6</div>
<div class="form-group" id="form-group">7</div>
<div class="form-group" id="form-group">8</div>
<div class="form-group" id="form-group">9</div>
<div class="form-group" id="form-group">10</div>
</form>
Stack Overflow用户
发布于 2018-08-17 22:42:46
所有这些变化都应该是有效的。您的<style>或<link>标记中可能有错误，或者文档加载和引用外部样式表时出现问题。
正确语法的示例：
引用外部样式表：
<link rel="stylesheet" href="./styles.css">或内联样式表。
<style>
.form-group:first-child {
display: none;
}
#form-group:first-child {
display: none;
}
#my-form #form-group:first-child {
display: none;
}
#my-form .form-group:first-child {
display: none;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51897709
复制相关文章
相似问题
腾讯云开发者
