2

我正在使用 Sass 将我的 SCSS 样式表编译成单个assembled.css以减少 HTTP 请求。为了命名单个页面的样式，我将每个页面特定的 CSS 文件包装在该页面<body>元素的 ID 选择器中 - 例如：

body#support {

    .introduction {
        @extend %dropcap;
    }

}

在 nanoc（使用 ERB）中，我有一个帮助程序，它根据 HTML 文件夹结构为每个页面的正文分配一个以破折号分隔的唯一 ID，因此根页面将是#support或#products，而它们的子页面将具有类似 `#products 的 ID -巨型空间激光”。

我想制定一组仅适用于这些“产品”子页面（不包括根级#products页面本身）的 SCSS 规则。如果我为此使用属性选择器而不是 ID，有什么我应该注意的关于特异性的，如下所示？

body[id^="products-"] {

    .introduction {
        @extend %dropcap;
    }

}

我真的不想使用!important，但我确实想确保这些特定于页面的规则优先于在 @import 顺序中位于它们之前的 '_base.scss' 部分中设置的样式。鉴于我可以完全控制 HTML 结构，理论上我也可以在 Sass 文件中使用 Erb 来替换以逗号分隔的 ID 列表，如下所示：

body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {

    .introduction {
        @extend %dropcap;
    }

}

- 但这似乎很不雅。提前致谢。

编辑：

我以非常依赖级联的方式编写了其他样式：

  1. 规范化 CSS
  2. HTML5 Boilerplate 和我自己的明智的家规
  3. CSS 库（在本例中为 Bourbon & Neat）
  4. 一个“_source.scss”，它依次导入自己的 mixins 和占位符选择器。
  5. 一个“_base.scss”，用于设置每个页面的默认布局框架。
  6. 一系列 .scss 文件用于每个页面的单独内容样式 - 我希望在必要时覆盖base.scss 布局决策（如果页面需要严重偏离规范）。

无论哪种方式，这些单独的页面样式表肯定需要比早期的默认设置具有更高的特异性，因为它们是为特定目的和页面编写的。我故意不使用任何 ID 选择器，除了这个特定目的 - 命名空间页面样式表。

使用，说

.services .sharktraining .introduction .disarmingJoke {}  --0,0,4,0

在“_base.scss”中会超过

body[id^="products-"] .disarmingJoke {}                   --0,0,2,1

在更进一步的级联“products.scss”中，不是吗？（注意，我知道需要使用四个类是一种糟糕的做法，我只是不想担心某些东西会从命名空间中溜走）。

我想还有另一个 - 非常肮脏的 - 选项：多次重复 body[id^="products-"]选择器，甚至超过最具体的班级强度规则。

4

1 回答 1

1

这将不得不取决于您如何编写其他样式以及它们是否应该优先（参见：http ://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-应该知道/ )。

如果您完全匹配选择器，但将其中一个与您的主体选择器相匹配，则前缀一个将足够具体，无论如何都可以优先考虑（即使顺序颠倒了）：

body[id^="products-"] .widget {
    color: green;
}

.widget {
    color: red;
}

将.widget是绿色的，因为第一个选择器比第二个选择器更具体。

在 id 上使用属性选择器的唯一问题是您是否关心 IE6。如果您对此感到担忧，Dean Edwards 的 IE7 JS 库可以为您提供帮助： http ://code.google.com/p/ie7-js/

如果可以选择更改页面信息附加到 body 元素的方式，我的建议是让父目录为 id，子页面为类：

<body id="products" class="giantspacelaser" />

这样您就可以保留 id 的特异性：

// excludes the body#products page, which wouldn't have a class set at all
body[class]#products { 
    // styling here
}
于 2012-12-27T13:11:26.597 回答