如何应用显示：none；在 div 中的 class

Question

我试图隐藏这组行中的一些 <div class="form-group"> 行。我想隐藏布尔值 1 和布尔值 3。我可以在子记录表单字段上应用 display: none; 以某种方式隐藏部分行吗？

<div class="subrecord-form-fields">
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">Boolean 1</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">Boolean 2</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">Boolean 3</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">Integer 1</label><div class="col-sm-9"><input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control"></div></div>

更新：抱歉，应该提到我不是 100% 确定这个列表永远不会改变，所以我希望能够按名称挑出行，而不仅仅是第二行。

Answer 1

例如，要隐藏第二个 div 使用此：

.subrecord-form-fields :nth-child(2)
{
    display: none;
}

Answer 2

是的！使用伪 class :nth-child 你可以做这样的事情：

.subrecord-form-fields div:nth-child(1), .subrecord-form-fields div:nth-child(3)
{
    display: none;
}

我为您制作了一个片段，关于它的外观，现在您需要使用一些 js 来随时隐藏或显示。

.subrecord-form-fields div:nth-child(1), .subrecord-form-fields div:nth-child(3)
{
    display: none;
}

<div class="subrecord-form-fields">
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">
    Boolean 1
   </label>
  <div class="col-sm-1 checkbox">
  <input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">
    Boolean 2
   </label>
   <div class="col-sm-1 checkbox">
    <input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox">
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">
    Boolean 3
   </label>
  <div class="col-sm-1 checkbox">
   <input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox">
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">
   Integer 1
  </label> 
 <div class="col-sm-9">
  <input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control">
 </div>
</div>

Answer 3

这将隐藏所有带有 for 属性以 __boolean_3_ 或 __boolean_1_ 结尾的标签，以及所有带有以这些字符串结尾的 ID 的元素（对于随机生成它们的情况很有用订单）。

[for$="__boolean_3_"],
[for$="__boolean_1_"],
[id$="__boolean_3_"],
[id$="__boolean_1_"] {
  display: none;
}

[for$="__boolean_3_"],
[for$="__boolean_1_"],
[id$="__boolean_3_"],
[id$="__boolean_1_"] {
  display: none;
}

<div class="subrecord-form-fields">
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">Boolean 1</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">Boolean 2</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">Boolean 3</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">Integer 1</label>
    <div class="col-sm-9"><input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control"></div>
  </div>

显然，如果您知道他们的顺序，:nth-child() 就会派上用场。
如果您想更具体（为避免误报，您可以使用 .subrecord-form-fields 作为前缀或应用标签（即：label[for$="__boolean_3_"]，等等...）。

但实际上，JS 才是正确的方法。如果您想找点乐子，请查看 CSS selectors, modifiers and combinators.

的完整列表

Answer 4

如果你想插入行，你可以通过这样做来实现...

.subrecord-form-fields > :nth-child(2n -1)
{
    display: none;
}

如何应用显示：none；在 div 中的 class

How To apply display: none; to a class in a div

css

css-selectors

display