css - 显示 :none not working - probably wrong element targeted

Question

我需要设置一个 side form 的蜜 jar 部分display:none 但由于某些原因，我的 CSS 调整不起作用。涉及的元素是这些(如通过 Firebug 检查时所示):

<li id="field_9_9" class="gfield gform_validation_container field_sublabel_below field_description_below">
<label class="gfield_label" for="input_9_9">Phone</label>
<div class="ginput_container">
<input id="input_9_9" type="text" value="" name="input_9">
</div>
<div class="gfield_description">This field is for validation purposes and should be left unchanged.</div>
</li>

在样式表上，我插入了:

.gfield gform_validation_container field_sublabel_below field_description_below #field_9_9 {
        display:none;
}

我有一种感觉，我瞄准了错误的元素。应该是哪一个？

Answer 1

你需要这样做:

#field_9_9.gfield.gform_validation_container.field_sublabel_below.field_description_below {
    display:none;
}

您忘记添加“.”在每个类名之前并且由于所有类(和 ID)都在同一个元素上，您需要将所有类和 ID 连接在一起。

但更优雅的解决方案是简单地定位 ID:

#field_9_9 {
    display:none;
}