特定分类的图标大小 - 只在直接访问时生效

错误
1

对于一个特定的类别，我们添加了以下 CSS 来调整类别徽标的大小。但是，CSS 仅在您通过链接访问类别时应用，请参见此处：

Contests - Forum | Cannabisanbauen.net （我们运行的是 3.2 稳定版）

CSS（在 Common 中）：

/* Contest Kategorie - category image for each contest subcat  */
body[class^="category-contests"] {
@supports (--custom: property) {
.category-logo.aspect-image {
    --max-height: 250px;
}
.category-boxes .category-box .category-logo.aspect-image img, .category-boxes-with-topics .category-box .category-logo.aspect-image img {
    --height: 250px;
}
}
}

但是，当从论坛上的另一个页面进入时，CSS 没有被“触发”，类别徽标仍然是默认大小。

重现步骤：

  1. 转到 https://forum.cannabisanbauen.net/
  2. 通过侧边栏或类别选择器进入“Contests”类别
  3. 类别徽标为默认大小

这是错误还是我们应该以不同的方式实现 CSS？

2

嗯，这真是一个奇怪的问题！

我注意到，根据你访问页面的方式，<body> 标签的类名顺序会有所不同：

image
image925×184 38.5 KB

“body[class^=\"category-contests\"]” 中的 “^” 符号只会搜索类名列表的开头部分，所以我的猜测是，它只在 ‘category-contest’ 是列表中的第一个类名时才有效。

还有一个 “*” 符号，它会在类名列表中的任何位置搜索匹配项。你可以尝试将第一部分更改为：

body[class*="category-contests"]
          ↑（用 * 替换 ^）

或者，更简单地写成：

body.category-contests

如果这有帮助，请告诉我！

2 个赞
3

谢谢，这确实解决了问题……不知道我为什么把它想得那么复杂 :smiley: