CSS

Question

我一直在想办法隐藏下面 html 中除第一个之外的每个 'label' 元素。我有一个中继器字段，它添加了一个带有下拉 select 字段和标签的行。

每个新行都会添加 select 字段和标签。 label id以'label-repeat- '开头，后缀是根据repeater行数动态生成的，所以是：'label-repeat-1', 'label-repeat-2', 'label-repeat-3'等

问题是每个中继器行都单独包装到它自己的 div 中，所以我猜我不能在这种情况下使用 :not(:first-child)。

这是我的 fiddle 下面是我的 html:

<div class="fieldset">
  <div class="status">
   <label id="label-repeat-1" class="label-repeater">Status</label>
   <select id="field-repeat-1" class="field-repeater">
     <option value="Open">Open</option>
     <option value="Closed">Closed</option>
   </select>
  </div>
</div>
<div class="fieldset">
  <div class="status">
   <label id="label-repeat-2" class="label-repeater">Status</label>
   <select id="field-repeat-2" class="field-repeater">
     <option value="Open">Open</option>
     <option value="Closed">Closed</option>
   </select>
  </div>
</div>
<div class="fieldset">
  <div class="status">
   <label id="label-repeat-3" class="label-repeater">Status</label>
   <select id="field-repeat-3" class="field-repeater">
     <option value="Open">Open</option>
     <option value="Closed">Closed</option>
   </select>
  </div>
</div>

我一直在尝试使用通配符 select 或 select 带 label[id^='label-repeat-'], label[id*=' label-repeat-'] 的标签，效果很好，但后来我尝试添加 :nth-of-type(n+2) 伪 class 到 select 除了第一个标签之外的每个标签并隐藏它，但这似乎不起作用。

label[id^='label-repeat-']:nth-of-type(n+2),
label[id*=' label-repeat-']:nth-of-type(n+2) {
  display: none !important;
}

还有其他方法可以用 CSS 做到这一点吗？甚至 jQuery?

Answer 1

据我了解，您想隐藏除第一个标签之外的所有标签。那么，您最终会得到一个标签和下面的 3 个 select 框吗？在 CSS 中使用“加号”组合符是表达“除了第一个以外的所有”的最简单方式...

.fieldset + .fieldset label {
  display:none;
}

此规则表示任何字段集后跟另一个字段集（除第一个字段外的所有字段集），然后是那些下面的嵌套标签。

CSS - 隐藏除第一个元素以外的所有同类元素 - 不是子元素

CSS - Hide every element of the same kind except the first - not child

wordpress

css-selectors