CSS行为在软件更新后发生改变

贡献 用户体验
1

我在两天前将 Discourse 更新到了 2.7.0beta4，随后注意到自定义 CSS 的行为发生了变化。此前，我使用了以下（简化后的）CSS 代码来向非工作人员隐藏特定标签：

:not(.staff){
    .topic-list{
        .category-marketplace{
            a[data-tag-name="wagon"]
            {
                display: none!important;
            }
        }
        
    } 
}

最近我发现这些标签对工作人员也被隐藏了。我想知道这是否与此次更新有关。如果是，该如何进行调整？谢谢！

1 个赞
2

这应该仍然有效，我在开发站点上测试过，效果符合预期……这是唯一停止工作的 CSS 吗？

4 个赞
3

是的，这是我注意到的唯一表现不同的地方。我不确定为什么它会向员工隐藏标签，因为当我以员工身份访问我的网站时，我清楚地看到 <body class="staff navigation-categories categories-list">。

1 个赞
4

你解决这个问题了吗？

1 个赞
5

没有，我还没有。我尝试过用几种方式重写 CSS 代码（例如 html:not(.staff)、body:not(.staff)，或将元素组合在一行中），但代码仍然会隐藏为工作人员选定的元素。

1 个赞
7

嗯……你能尝试把这段 CSS 放到包含你其他 CSS 的文件的底部吗？我怀疑可能与其他地方的某些 CSS 存在冲突，这样或许能确认问题。

body:not(.staff) .topic-list-item a[data-tag-name="wagon"] { 
  display: none !important; 
}

如果你的网站是公开的，也欢迎在这里贴上链接，我可以更仔细地查看是否有明显的问题。

2 个赞
8

谢谢！网站地址是：Marketplace - Leasehackr Forum

我主要是希望将“市场”类别及其子类别中的某些标签对非“工作人员”用户隐藏。

感谢您的协助！

1 个赞
9

抱歉回复晚了，你找到问题所在了吗？我注意到现在在你的网站上，某些标签对非工作人员是隐藏的。

10

我还没有想出解决方案。目前，.staff 和非 .staff 用户的标签仍然被隐藏。谢谢！

11

我认为这里可能有两个问题。第一个是应该在 :not 之前加上 body，否则 :not 可能会匹配到任何没有该类的 div。

第二个问题是这些样式相互冲突：

:not(.staff) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

:not(.primary-group-dealers) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

:not(.primary-group-brokers) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

第一种样式会隐藏“wagon”标签，如果你不是工作人员……但第二和第三种样式会在你的主用户组不是经销商或经纪人时也隐藏“wagon”标签。你必须同时满足所有三个条件才能避免 display: none;。

我认为你应该将这三者合并如下：

body:not(.staff):not(.primary-group-dealers):not(.primary-group-brokers)  .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none;
}

第一种方式（三个独立的样式）相当于“非且”逻辑：

非 staff 且 primary-group-dealers 且 primary-group-brokers

第二种方式（链式 :not）相当于“或”逻辑：

非 staff 或 primary-group-dealers 或 primary-group-brokers

4 个赞
12

问题解决了！非常感谢！

1 个赞