如何根据URL的cat参数为特定分类页面应用专属CSS样式？

我有一个通过URL的GET参数cat=ID展示不同分类内容的HTML页面，所有分类目前共用一套全局CSS样式。现在需要给特定分类（比如cat=444）单独调整内容宽度等样式，要求不改动其他分类的样式，仅根据URL参数覆盖原有CSS。

当前全局CSS（所有分类通用） #

@media screen and (max-width:1300px) {
    body { min-width:100%; }
    [layout="sp-layout-fixed"] { width:100%; }
    #sp-index-navigation { display:none !important; }
    #sp-sky,
    #sp-header,
    #sp-category-1-normal { background:#fff; }
    #sp-category-1-normal > ul { white-space:nowrap; margin:0 60px;}
    .sp-index-point-1[grid="3"] > ul { margin:30px 0 0 0; }
    .sp-index-point-1[grid="3"] > ul > li { width:32%; margin-left:0; overflow:hidden; }
    .sp-index-point-1[grid="3"] > ul > li + li { margin-left:2%; }
    .sp-index-point-1[grid="3"] .sp-slider[between="30"] .slick-slide { margin:0 !important; }
    #sp-footer-design-3 .sp-footer-description ul li.sp-left { width:50%; }
    #sp-footer-design-3 .sp-footer-content > ul > li { padding:30px !important; }
}

页面HTML结构 #

<div id="sp-project" layout="sp-layout-fixed" module="Project_Package">
    <div id="{$cate_id}" class="sp-project-loop" module="project_list">
        CATEGORIES CONTENT
    </div>
</div>

需求 #

当访问URL为somesite.com/page.html?cat=444时，使用以下专属CSS替代原有对应样式：

@media screen and (max-width:3500px){
        body { min-width:100%; }
        [layout="sp-layout-fixed"] { width:80%; margin: 0 auto; }
        #sp-index-navigation { display:none !important; }
        #sp-sky,
        #sp-header,
        #sp-category-1-normal { background:#fff; }
        #sp-category-1-normal > ul { white-space:nowrap; margin:0 60px;}
        .sp-index-point-1[grid="3"] > ul { margin:30px 0 0 0; }
        .sp-index-point-1[grid="3"] > ul > li { width:32%; margin-left:0; overflow:hidden; }
        .sp-index-point-1[grid="3"] > ul > li + li { margin-left:2%; }
        .sp-index-point-1[grid="3"] .sp-slider[between="30"] .slick-slide { margin:0 !important; }
        #sp-footer-design-3 .sp-footer-description ul li.sp-left { width:50%; }
        #sp-footer-design-3 .sp-footer-content > ul > li { padding:30px !important; }
}

当然可以实现，下面提供几种靠谱的方法：

方法1：利用现有HTML中的分类ID（推荐） #

观察HTML结构，分类内容容器的id是{$cate_id}，这个值对应URL里的cat参数（比如cat=444时，该id为444）。直接通过这个ID编写优先级更高的CSS选择器，覆盖全局样式：

/* 全局样式保持不变 */
@media screen and (max-width:1300px) {
    /* 原全局样式代码 */
}

/* cat=444的专属样式 */
@media screen and (max-width:3500px){
    /* 针对目标分类容器的父级或关联元素提升选择器优先级 */
    #sp-project #444 ~ [layout="sp-layout-fixed"] {
        width:80%; 
        margin: 0 auto; 
    }
    /* 其他需要覆盖的样式，统一加上#444前缀提升优先级 */
    #444 body { min-width:100%; }
    #444 #sp-index-navigation { display:none !important; }
    /* ... 其余专属样式 */
}

可根据实际DOM层级调整选择器，确保其优先级高于全局样式即可。

方法2：JavaScript检测URL参数并添加专属类 #

通过JS读取URL中的cat参数，给页面根元素（如body）添加自定义类，再基于该类编写CSS：

第一步：添加JavaScript代码 #

const urlParams = new URLSearchParams(window.location.search);
const catId = urlParams.get('cat');

// 匹配目标分类时，给body添加专属类
if(catId === '444'){
    document.body.classList.add('cat-444');
}

第二步：编写专属CSS #

/* 全局样式保持不变 */
@media screen and (max-width:1300px) {
    /* 原全局样式代码 */
}

/* cat=444的专属样式 */
.cat-444 @media screen and (max-width:3500px){
    body { min-width:100%; }
    [layout="sp-layout-fixed"] { width:80%; margin: 0 auto; }
    /* ... 其余专属样式 */
}

这种方法灵活性强，适合多分类需要不同样式的场景。

方法3：服务器端动态输出CSS（有后端支持时使用） #

如果页面由后端语言（如PHP、Node.js）渲染，可直接在服务端判断cat参数，动态输出对应CSS：
以PHP为例：

<?php
$cat_id = $_GET['cat'] ?? '';
?>
<!-- 全局CSS -->
<style>
@media screen and (max-width:1300px) {
    /* 原全局样式代码 */
}
</style>

<!-- 动态输出cat=444的专属CSS -->
<?php if($cat_id === '444'): ?>
<style>
@media screen and (max-width:3500px){
    /* cat=444的专属样式代码 */
}
</style>
<?php endif; ?>

该方法无需前端额外处理，样式加载更直接。

内容的提问来源于stack exchange，提问作者marco romano