我有这些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>
这些都不起作用,我到底做错了什么?
发布于 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>
发布于 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>
https://stackoverflow.com/questions/51897709
复制相似问题