在 Drupal 7 中使用 CSS 定位单个 HTML 元素答案

【问题标题】：Targeting a single HTML element with CSS in Drupal 7在 Drupal 7 中使用 CSS 定位单个 HTML 元素
【发布时间】：2013-02-17 21:38:57
【问题描述】：

我想在 Drupal 7 站点的一个特定页面（节点）上重新设置页面标题 (h1) 的样式。在特定页面上使用 CSS 定位单个 HTML 元素的最佳方法是什么？

显然，我希望所有其他页面上的页面标题不受影响。

我正在使用 Bartik 的子主题，如果它有什么不同的话。

【问题讨论】：

在 h1 上使用了 ID？
我认为没有任何东西可以从其他节点中脱颖而出。
Drupal 向正文添加大量类以识别每个页面，检查那里。例如对于首页，您可以使用body.front h1 {...

标签： drupal drupal-7

【解决方案1】：

通常在大多数主题类中都添加了body标签。除非您使用像 mothership 这样的主题，您可以强制它删除此类类，否则这些主题非常方便。甚至 Mothership 也提供了一个设置来启用/禁用使用此类类填充 body 标签。

使用 chrome 中的检查元素或 Firefox 中的 Firebug 或 IE 中的开发人员工具栏，在您想要设置主题的页面中查找代表 <body> 标记中的 <content_type>-<entity-type>-<id> 之类的类。例如page-node-12

omega 主题的示例输出如下

<body class="html not-front logged-in page-node page-node- page-node-8 node-type-page context-page admin-menu coffee-processed omega-mediaqueries-processed alpha-debug-processed responsive-layout-wide">

Bartic 主题的示例正文标签输出，

<body class="html not-front logged-in no-sidebars page-node page-node- page-node-33 node-type-team-member admin-menu coffee-processed">

然后为您的节点标题找到特定的选择器，例如#page-title，或者如果它没有 id，则找出一些规则来选择它，使其在页面中唯一。例如.page h1.title

现在你可以使用了，

body.page-node-12 #page-title {
  /* your css rule */
}

或

body.page-node-12 .page h1.title {
  /* your css rule */
}

【讨论】：