通过css隐藏表单中的字段

时间:2018-08-21 作者:Acie_88

所以我试图在表单中隐藏一些字段。输入类型=“”部分很容易通过ID隐藏,但我无法了解如何编辑label类。

在阅读了几篇文章和网站后,我确实尝试了:nth-child()选择器,但似乎无法正常工作。这就是我所做的。有没有关于我做错了什么以及如何改进的建议

CSS

#fc-calc-result-wraps:nth-child(2n) {
  display: none;
}
HTML

    <div class="fc-calc-result-wraps" style="display: block;">
    <div class="input-group">
    <label class="control-label">Total At Retirement:</label>
    <input type="text" class="control num" id="edFV" maxlength="14" size="16" disabled="">
    </div>
    <div class="input-group">
    <label class="control-label">Contributions:</label>
    <input type="text" class="control num" id="edNumPmts" maxlength="3" size="16" disabled="">
    </div>
    <div class="input-group">
     <label class="control-label">Total Invested:</label>
    <input type="text" class="control num" id="edTotalInvested" maxlength="14" size="16" disabled="">
    </div>
    <div class="input-group">
    <label class="control-label">Interest Earned:</label>
    <input type="text" class="control num" id="edInterest" maxlength="14" size="16" disabled="">
    </div>
    <div class="input-group tail">
    <label class="control-label">Last Deposit Date:</label>
<input type="text" class="control num" id="edFVDate" maxlength="14" size="16" disabled="">
    </div>
    </div>

1 个回复
SO网友:ahendwh2

n子元素取决于元素本身,而不是元素的子元素。因此,以下CSS的意思是:“如果某个元素是具有类fc calc result wrapps的元素的第二个子元素,则使用类输入组隐藏该元素”。

.fc-calc-result-wraps > .input-group:nth-child(2) {
    display: none;
}

结束