在除特定页面 ID 之外的所有页面上设置 CSS 样式

Posted 2023-02-22

【中文标题】在除特定页面 ID 之外的所有页面上设置 CSS 样式

【英文标题】：Set CSS style on all but specific page ID

【发布时间】：2014-07-28 20:41:04

【问题描述】：

我正在为一个客户开发一个网站，该客户希望在整个网站范围内使用特定的背景颜色，除了一个页面上基本上用作具有独特内容和样式的单独的一页网站。

我的问题是……如何将 CSS 样式应用于所有但特定的页面 ID？

我的 CSS 当前如下所示：

.et_section_regular, #main-content background-color: #F5EFE5 !important

!important 之所以存在，是因为我必须从一开始就覆盖主题的默认背景颜色。我试过使用以下 not：选择器 (referenced here) 没有运气：

.et_section_regular:not (.page-id-714 .et_section_regular), #main-content:not(.page-id-714 #main-content) background-color: #F5EFE5 !important

我正在尝试做的事情可能吗？

【问题讨论】：

也向我们展示一些 html。不确定您使用的是什么结构。

在这种情况下不要使用!important。 （最好不要使用它 - 没有它，IMO 一切都可以解决）。使用更强大的选择器。您的覆盖规则需要与最强的!important 规则一样“选择性”，并且必须在此之后定义。 IMO，not() 不是必需的：.page-123 .class .class ... 应该足够了。

【参考方案1】：

DEMO

您不能选择高于您应用:not()的选择器

另一种方法是首先提及应用您的页面 id 的父选择，然后定位内部 div - 检查演示。

CSS：

section:not(.page-id-174) .et_section_regular,
section:not(.page-id-174) #main-content
    background-color: #F5EFE5 !important

请注意，我仅在演示中使用部分标签，但您可以使用正文标签 - 我假设您已应用 .page-id-174

【讨论】：

感谢您的回复！我试过这个，用“body”替换“section”，但在你的演示或我的网站上都无法让它工作。所以也许 body 不会在那里工作？ body:not(.page-id-174) .et_section_regular, body:not(.page-id-174) #main-contentbackground-color: #F5EFE5 !important

再次感谢大家的反馈。我最终放弃了尝试这样做，只是创建了一个新的页面模板并以这种方式设置样式。不过，希望这个小线程对以后的其他人有所帮助 - 也许比我更聪明的人可以弄清楚如何实施 Imran 的建议。

没有必要创建不同的模板，你可以使用层次结构的力量检查我的answer revision 1

我刚刚确认我当前的解决方案即使使用 body 标签也能正常工作......你一定有其他问题。

是的，这只是我使用的特定主题和结构的问题（Elegant Themes Divi）。通过定位 templateid，我能够简化这一点并避免使用 :not。感谢您的宝贵时间，一定会为以后添加书签！