仅对基于链接的特定页面应用CSS

Question

我有一个基于链接(GET)打印不同类别的HTML文件，这个HTML文件有一个全局CSS文件分配给它，所以所有类别看起来都是一样的。

我想让一个特定的类别看起来不同，调整内容的宽度和其他东西，有没有办法应用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吗?猫= 123

我想要的，例如，当我打开一些网站。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; }
}

是否有任何方法可以覆盖CSS代码并使用基于链接上使用的?cat=ID的不同CSS ?

Answer 1

您可以创建两个CSS类，每个类用于样式化每个页面。
然后你可以使用Javascript来检测当前页面是什么，并将所需的CSS类(上面两个中的一个)设置为页面的'body'元素。

下面的代码将检测当前页面是否为…com/page.html?cat=444，如果为真，则将CSS类添加到'body'元素:

if (window.location.href.indexOf('/page.html?cat=444') >= 0) {
document.querySelector('body').classList.add('page-444');
}

下面的代码是根据你的代码修改的:

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

是的，它看起来很丑，因为你必须多次重复css类。但是SASS/SCSS可以提供帮助!(嵌套的CSS类).