在用户审批审核队列中隐藏除一个自定义字段外的所有字段

支持
1

有人能帮我解决一些 CSS 问题吗？

我们的论坛有很多用户自定义字段（UCF），但只有一个是用于注册的；这个字段对于决定是否批准申请至关重要。

因此，我现在希望在审核队列中隐藏除该字段（恰好是第一个）之外的所有字段，这样我的版主们就不必在审核每个新用户时查看一堆空字段了。

我目前做到了这一步：

.reviewable-user-details.user-field{
     display: none;
    /*尝试隐藏审核队列中的 UCF —— 目前隐藏了所有字段*/
}

这确实隐藏了所有字段，但我仍需要显示第一个。我尝试过 &:nth-of-type(1)，但在这里不起作用 —— 我想是因为 HTML 的结构方式。这些元素没有类名。

有什么建议吗？

6

我进行了一项小修改，使您的 &:nth-of-type(1) CSS 能够生效，之前那里多了一个包裹的 div 阻碍了它。如果您在几小时内更新您的站点，此修改应该已经可用。

7

你们太棒了！！！非常感谢！！！！

8

我看到 Ember 的 div 已经消失了——谢谢。

不过，我仍然无法让 CSS 正常工作，它只是隐藏了所有内容。我尝试了几种变体；也许我做了什么愚蠢的事情。另外，我想知道如果它真的按我的目标生效了会怎样：难道第二个或第三个需要审批的人的所有字段都会被隐藏吗？

这是我尝试过的代码：

.reviewable-user-details.user-field {
    display: none;
            
    &:nth-of-type(1){
        display: block;
    }
}
9

啊，对了，那样行不通，这也是意料之中的……我总是忘记 nth-of-type 关注的是元素，而不是类名。

所以在这种情况下，由于没有元素只有类名，因此无法生效。但如果你确实添加了元素（本例中为 div），它只会匹配当第一个兄弟 div 也具有 .user-field 类时（实际上并没有，因为在该父元素内，在 .user-field 之前还有其他 div）。

总之，长话短说……这里使用通用兄弟选择器（general sibling combinator）即可。在 .reviewable-user-fields 内部，这将选中所有作为第一个 .user-field 兄弟元素的 .user-field。

.reviewable-user-fields .user-field ~ .user-field {
    display: none;
}
10

我完全不知道你在说什么——但它确实管用，非常感谢！

这或许能帮助其他依赖自定义向导插件（Custom Wizard Plugin）在注册时使用的私人论坛用户 @Angus。

如果要显示第 2 个或第 3 个 .user-field，该怎么做呢？我目前不需要这样做，但将来可能会有这个需求。