Question

我想知道如何在wordpress CSS中对类进行分组或更少，例如，我有很多页面可以添加以下样式，而复制和粘贴类的末尾部分非常耗时：

.page-id-16592 .header_bottom, 
.page-id-16663 .header_bottom, 
.page-id-16664 .header_bottom, 
.page-id-16665 .header_bottom, 
.page-id-16666 .header_bottom,
.page-id-16601 .header_bottom,
.postid-16728 .header_bottom,
.postid-16722 .header_bottom,
.postid-16725 .header_bottom,
.postid-16727 .header_bottom {
    background-color: #222 !important;
}

我尝试过以下运气：

.page-id-16592, .page-id-16663, 
.page-id-16664, .page-id-16665, 
.page-id-16666, .page-id-16601, 
.postid-16728, .postid-16722, 
.postid-16725, .postid-16727 {
    .header_bottom {
        background-color: #222 !important;
    }
}

这使我可以有效地添加页面ID。

感谢您的投入。

Answer 1

将以下或类似的代码添加到您的functions.php文件中。当帖子ID位于<body>数组中时，这会将一个类添加到页面的$ids标记中。

或者，您可以对其进行修改，以针对具有特定自定义元属性或类别等的帖子/页面。

add_filter('body_class', function (array $classes) {
    // Prepare your target ids
    $ids = [16592, 16663, 16664, 16665, 16666, 16601, 16728, 16722, 16725, 16727];

    if (in_array(get_the_ID(), $ids)) {
        $classes[] = 'my-custom-class';
    }

    return $classes;
});

然后在CSS中，您可以使用以下方式定位这些特定页面：

.my-custom-class .header_bottom {
    // ...
}

Answer 2

您不能在要设置样式的所有帖子/页面上应用课程吗？

类似.main

的通用名称

.main .header_bottom {
    background-color: #222 !important;
}

或者如果您不介意在所有.header_bottom上应用此样式，那么

.header_bottom {
    background-color: #222 !important;
}

如何在Wordpress CSS样式表中减少类

2 个答案: