如何从一页中排除 CSS？或者如何重置一页的边距

Posted 2023-03-06

【中文标题】如何从一页中排除 CSS？或者如何重置一页的边距

【英文标题】：How to exclude CSS from one Page? Or how to reset margins of one page

【发布时间】：2017-07-30 21:09:18

【问题描述】：

我来找你似乎是快速解决问题，但我尝试过的所有方法都没有按照我的计划进行。

所以我想做的是将以下 CSS 应用于我网站的所有页面，除了一个：.page-id-145。我尝试在以下代码的开头使用 section:not(.page-id-145) ，但它最终弄乱了我的其他页面，同时修复了我需要的页面。我怎样才能简单地从我想要的页面中排除以下代码，而不会弄乱其他页面？我特别希望（边距和浮动）在第 145 页上消失。

基本上，我只需要一种方法来设置此特定页面的边距/浮动：http://www.thegras-s-rootsgarage.com/great-albums-rym-list/ 在左侧，而不是在中间，这是以下 CSS 描述的内容。

这是我的主题 CSS，它可能会影响相关的特定页面：

#header,
#main-content,
#wrapper-footer 
  float: none;
  height: auto;
  position: relative;
  width: 100%;        

#wrapper #main-content       /* this section likely must change */
  padding: 28px 28px 10px;
  width: 720px;         
  margin: 0 auto;
  float: none;

#content 
  float: none;
  width: 750px;       

这是我之前提出的另一个例外情况，可能会或可能不会影响它：

.page-id-145 .header-image display: none;

总而言之，我只是想在特定页面的左侧开始我的页边距，而不是上面 CSS 中指定的内容。不幸的是，我经历了各种迭代以使其像 :not 甚至取消设置、继承和初始一样工作，但无济于事。另一个可能起作用的细节包括这个特定的 Wordpress 主题被设计为包含侧边栏小部件的事实 - 不确定这是否会有所帮助。有什么想法吗？

提前感谢您，祝您有美好的一天。

【参考方案1】：

如果可以，请将主题的 css 更改为：

#wrapper #main-content 
   padding: 28px 28px 10px;
   width: 720px;


#wrapper:not(.page-id-145) #main-content 
   margin: 0 auto;
   float: none;

由于 page-id-145 类应用于具有包装器 id 的同一元素，因此您必须在该元素上指定 :not(.page-id-145)。我将样式分为两部分，第一部分将应用于#wrapper #main-content 的所有实例，而第二部分不会应用于 page-id-145。

如果您无法更改主题的 css（并且只能添加自定义 css），那么您可以使用它来覆盖它：

#wrapper.page-id-145 #main-content 
   margin: 0; /* can also be unset or initial, whatever you prefer */
   float: /* whatever you want it to be here */;

【讨论】：

第一个选择完美，非常感谢。我之前尝试过同样的想法，但我把 :not 放在#wrapper 前面，就像 n00b 一样，所以我想这就是区别。非常感谢你的帮助！干杯。

万岁！没问题:)