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

**URL:** <https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040>\
**Category:** Support\
**Created:** [2020年五月11日 12:15 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040 "2020-05-11T12:15:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2020年五月11日 12:15 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040/1 "2020-05-11T12:15:03Z")

</div>

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

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

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

我目前做到了这一步：

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

```

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

有什么建议吗？

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2020年五月12日 01:18 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040/6 "2020-05-12T01:18:00Z")

</div>

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

> <https://github.com/discourse/discourse/commit/a009ec597da2a72561cc396aca40d0e77481b751>

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2020年五月12日 01:31 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040/7 "2020-05-12T01:31:55Z")

</div>

> [@awesomerobot](#):
>
> 如果您在几小时内更新您的站点，这应该就可以使用了。

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

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2020年五月18日 07:25 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040/8 "2020-05-18T07:25:24Z")

</div>

> [@awesomerobot](#):
>
> 我做了一个小改动，这样你的 `&:nth-of-type(1)` CSS 就能生效了，

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

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

这是我尝试过的代码：

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

```

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2020年五月18日 21:08 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040/9 "2020-05-18T21:08:06Z")

</div>

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

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

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

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

```

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2020年五月19日 03:28 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040/10 "2020-05-19T03:28:08Z")

</div>

> [@awesomerobot](#):
>
> 所以在这种情况下，没有元素选择器，只有类名，因此无法生效。但如果你添加了元素（本例中为 `div`），那么它将仅在第一个 `div` 兄弟元素也具有 `.user-field` 类时才匹配（实际上并没有，因为在此父元素内，在 user-fields 之前还有其他 `div`）。

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

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

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

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2020年六月18日 03:35 UTC](https://meta.discourse.org/t/hide-all-but-one-custom-field-in-the-user-approval-review-queue/151040/11 "2020-06-18T03:35:00Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.