【问题标题】:Set CSS style on all but specific page ID在除特定页面 ID 之外的所有页面上设置 CSS 样式
【发布时间】: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 {...} 应该足够了。

标签: css styling


【解决方案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-content{background-color: #F5EFE5 !important}
  • 再次感谢大家的反馈。我最终放弃了尝试这样做,只是创建了一个新的页面模板并以这种方式设置样式。不过,希望这个小线程对以后的其他人有所帮助 - 也许比我更聪明的人可以弄清楚如何实施 Imran 的建议。
  • 没有必要创建不同的模板,你可以使用层次结构的力量检查我的answer revision 1
  • 我刚刚确认我当前的解决方案即使使用 body 标签也能正常工作......你一定有其他问题。
  • 是的,这只是我使用的特定主题和结构的问题(Elegant Themes Divi)。通过定位 templateid,我能够简化这一点并避免使用 :not。感谢您的宝贵时间,一定会为以后添加书签!
猜你喜欢
  • 2013-12-15
  • 1970-01-01
  • 1970-01-01
  • 2015-12-16
  • 1970-01-01
  • 2021-06-09
  • 2020-11-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多