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

对于一个特定的类别,我们添加了以下 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?

嗯,这真是一个奇怪的问题!

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


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

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

body[class*="category-contests"]
          ↑(用 * 替换 ^)

或者,更简单地写成:

body.category-contests

如果这有帮助,请告诉我!

2 个赞

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