我使用Sass将我的SCSS样式表编译成单个assembled.css以减少HTTP请求。为了命名各个页面的样式，我将每个特定于页面的CSS文件包装在该页面的<body>元素的ID选择器中—例如:
body#support {
.introduction {
@extend %dropcap;
}
}
在nanoc(使用ERB)中，我有一个帮助器，它根据HTML文件夹结构为每个页面的主体分配一个以划线分隔的唯一ID，因此根页面将是#support或#products，而它们的子页面将具有类似' #products-giantspacelaser'的ID。
我想做一组SCSS规则，只适用于这些"产品"子页面(不包括根级#products页面本身)。如果我使用属性选择器而不是ID，是否有什么我应该注意的特异性，如下所示?
body[id^="products-"] {
.introduction {
@extend %dropcap;
}
}
我真的不想使用!important，但我确实想确保这些特定于页面的规则优先于'_base中设置的样式。在@import顺序中位于它们前面的Scss的部分。既然我可以完全控制HTML结构，理论上我也可以在Sass文件中使用Erb来替换以逗号分隔的id列表，如下所示:
body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {
.introduction {
@extend %dropcap;
}
}
-但这似乎很不优雅。提前谢谢。
编辑:我已经用一种非常依赖级联的方式编写了我的其他样式:
- 正常化CSS
- HTML5样板的&我自己明智的家规
- CSS库(在本例中为Bourbon &整洁)
- "_source。Scss"，然后导入自己的mixins & &;占位符选择器。
- "_base。
- 一系列.scss文件，用于每个页面的单独内容样式—我希望覆盖base的。必要时的SCSS布局决策(如果页面需要严重偏离标准)。
使用
.services .sharktraining .introduction .disarmingJoke {} --0,0,4,0
。
body[id^="products-"] .disarmingJoke {} --0,0,2,1
在进一步的级联"产品中。"很好"，不是吗?(注:我知道需要使用四个类是糟糕的做法，我只是不想担心某些东西会通过名称空间滑出)。
我想还有另一个——非常肮脏的——选项:多次重复body[id^="products-"]选择器，以简单地超过甚至最具体的类强度规则。
这将取决于您如何编写其他样式以及它们是否应该优先(参见:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/)。
如果你完全匹配了选择器，但是在其中一个选择器前面加上了你的body选择器，那么这个带前缀的选择器将足够特殊，无论如何(即使顺序颠倒了)都可以优先:
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
}