# 能否用 CSS 实现？在分类页面上对分类进行分组

**URL:** <https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433>\
**Category:** Development\
**Created:** [2019年三月24日 02:34 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433 "2019-03-24T02:34:40Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)\
**Post date:** [2021年二月9日 21:20 UTC](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/4 "2021-02-09T21:20:23Z")

</div>

有点晚了 😄 但也许其他人也需要。我必须说明：

- 并非所有 CSS 代码都是必需的，尤其是表格行的边框和背景颜色，因此请随意根据需要进行调整。
- 我不得不将布局从常规表格改为 flex，因为表格行不能使用负边距，而且存在其他布局问题，而且……flex 更加灵活 😄
- 将 **Category Group 1** 和 **Category Group 2** 替换为你想要的类别组名称。
- 在我的示例中，我使用了类别 ID 2 和 4，因此请使用 Chrome 开发者工具进行检查（见下图），找到正确的类别 ID，并将我示例中的 `[data-category-id="2"]` 和 `[data-category-id="4"]` 替换为你的 ID。

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/0/20c8d66858337137775b1048489fbf85937818d4.png)

将此代码粘贴到“Common”标签页中：

```
.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

```

将此代码粘贴到“Desktop”标签页中：

```
.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

```

将此代码粘贴到“Mobile”标签页中：

```
body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

```

在桌面和移动分辨率下，效果如下所示：

 ![desktop-category-group](https://global.discourse-cdn.com/meta/original/3X/6/9/693329870088d62afecf09c96b7421505fa6ef8c.jpeg) ![mobile-category-group](https://global.discourse-cdn.com/meta/original/3X/a/a/aa3c122d49ff64a14d3cf2ae40b3fec7945e73ae.jpeg)

---

_[View the full topic](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433)._