Zen 子主题 CSS 类混淆 <div class="region region-sidebar-first column sidebar">答案

【问题标题】：Zen sub-theme CSS class confusion <div class="region region-sidebar-first column sidebar">Zen 子主题 CSS 类混淆 <div class="region region-sidebar-first column sidebar">
【发布时间】：2010-11-18 16:32:16
【问题描述】：

我创建了一个名为 mytheme 的 Zen 子主题，并将 /sites/all/themes/zen/STARTERKIT/css 的内容复制到 /sites/all/themes/mytheme/css/，并将 Navigation 块分配给 First sidebar 区域。

我想知道哪个 CSS 文件控制导航菜单的样式，因此我在我的网络浏览器 (Google Chrome 7.0.517.44) 中加载了该网站。

导航块包含在带有class="region region-sidebar-first column sidebar" 的div 中。我使用 Firebug 突出显示了这段代码，它告诉我该类定义在：http://www.mysite.dev/sites/all/themes/mytheme/css/layout-fixed.css。

在 layout-fixed.css 中没有名为 region region-sidebar-first column sidebar 的 CSS 类，但有一个名为 .region-sidebar-first 的类，我认为它与“区域区域侧边栏第一列侧边栏”有关。

What characters are valid in CSS class names? SO 主题说“名称必须以下划线 (_)、破折号 (-) 或字母 (a-z) 开头，紧跟 1 后跟一个字母或下划线，然后是任意数量的破折号、下划线、字母或数字”，这是有道理的。

但是.region-sidebar-first 在 HTML 源代码中如何以 'class="region region-sidebar-first column sidebar"' 结尾呢？这对于像我这样的初学者来说是令人困惑的，如果有人能解释这个命名约定背后的逻辑，那就太好了。

【问题讨论】：

标签： css drupal drupal-theming

【解决方案1】：

这些是应用于同一元素的多个类。你用空格分隔多个类。因此，从技术上讲，那里应用了四个类。

【讨论】：

四个类是：1. 区域 2. 区域侧边栏优先 3. 列 4. 侧边栏
谢谢布兰登。如何找出 .region、.column 和 .siderbar 类的定义位置？这些类都没有出现在 Firebug 的“匹配的 CSS 规则”中。
很可能有些不再使用，也很可能它们仅用于使用 Javascript 定位该元素。

【解决方案2】：

你可以给一个元素多个类，用空格分隔。您的元素总共有四个类：region、region-sidebar-first、column 和 sidebar。

【讨论】：