如何在不修改元素的情况下，将CSS类应用于具有给定id的元素？

Question

我有一页看起来像：<div id="header">...</div><div id="navigation">...</div> similar for body and footer.

我想使用网格系统对页面进行样式化，所有这些似乎都依赖于给提到的div提供一个基于它们的演示的类。但我不想这样做(也不能这样做，因为生成标记的方式)。

有没有办法做到这一点，而不只是把一个类的数字电视？我可以将所需类的详细信息复制到样式表中，其中提到divs，但这感觉是错误的。

编辑以澄清：

OP希望避免将class="grid_3“等添加到HTML中，但也不希望在3小时前添加#header {宽度: 960px；边距: 0px；}(我认为这是可以的)- Rory

确切地说，我不想将表示信息放在HTML中，但是我希望我不需要仅仅将组成网格系统的css类分开，并应用相关的部分(比如边距:0px和宽度:960px)，因为从维护和重用的角度来看，这是不好的。

因此，我将查看一个自动化系统来完成我所需要的工作，除非有一个答案，说明如何使用css将css类应用到一个HTML元素，而不向该元素添加class="blah“？因为这似乎不是对我做的一件疯狂的事。

Answer 1

好吧，如果您使用blueprint作为网格系统，您可以使用compress.rb将给定bp框架类的规则分配给您选择的一个特定的选择器，比如#footer或其他什么。例如，在yaml项目中，您可以拥有：

semantic_styles: # i dont think this is the right key definition but you get the idea
  '#footer,#navigation': ['span-12','clearfix']
  '#footer': ['push-1']
  # etc...

然后，当您对项目文件调用compress.rb时，它将从右边的选择器数组中将必要的声明汇总到左边的选择器中：

#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */} #footer {/* declarations from .push-1 */}

但总而言之，这是一种将声明复制到单独文件中的自动化，您认为这是“错误的”。但我的意思是，除了这样做(自动或手动)，我看不出可能的选择。

Answer 2

我不太明白这个问题。为什么不想将样式放在样式表中并通过id引用它们呢？

#header{
  position:relative;
  ...
}

Answer 3

我对网格系统也有同样的保留，添加类名与分离标记和样式是背道而驰的(但通常是为了提高效率而牺牲的)。

但是，我不认为使用您自己的CSS设置正确的列宽和边距有什么问题。您可以有一个特定的site.grid.css文件，该文件只包含网格的选择器和宽度/边距。我认为这是非常好的，这只是一种使用CSS类似变量的方式。例如，所有3列元素都将出现在

/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
    width: 301px;
}

然后，与其将class="grid_3"添加到HTML中，不如将选择器添加到CSS中。

您可能需要考虑最初使用类名，直到您对布局感到满意为止，然后将其转换为CSS选择器。哪一个最适合您的工作流程。