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

时间:2010-02-08 16:46:15

标签: css class

我的页面如下:<div id="header">...</div><div id="navigation">...</div> similar for body and footer.

我想使用网格系统来设置页面的样式,所有这些似乎都依赖于根据他们的演示文稿给出提到的类。但我不想这样做(并且由于生成标记的方式不能这样做)

有没有办法做到这一点,而不只是在div上放一个课程?我可以将所需类的详细信息复制到一个样式表中,用id提及div,但这感觉不对。


编辑以澄清:

  

OP希望避免在HTML中添加class =“grid_3”等,但也不想添加#header {width:960px;保证金:0px; (我觉得还可以) - Rory Fitzpatrick 3小时前

确切地说,我不想在我的HTML中放置演示文稿信息,但我希望我不必将构成网格系统的css类分开,并应用相关部分(如margin:0px)和宽度:960px),因为从维护和重用角度来看这是不好的。

所以,我将看一个自动化系统来完成我需要的工作,除非你有一个答案,你如何使用css将css类应用于HTML元素,而不对该元素添加class =“blah” ?因为这对我来说似乎并不是一件疯狂的事情。

4 个答案:

答案 0 :(得分:1)

我不确定我理解这个问题。为什么不想将样式放在样式表中并通过id引用它们?

#header{
  position:relative;
  ...
}

答案 1 :(得分:1)

如果你使用blueprint-css作为你的网格系统,你可以使用compress.rb将给定bp框架类的规则分配给你选择的特定选择器,如#footer或你有什么。例如,在你的项目中你可以拥有:

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 */}

但总而言之,这对于将声明复制到您认为“错误”的单独文件的自动化至关重要。但我的意思是除此之外(自动或手动)我不知道可能的选项是什么。

答案 2 :(得分:1)

我对网格系统有相同的保留意见,添加类名只是反对分离标记和样式(但通常会牺牲生产力)。

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

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

然后,您只需将选择器添加到CSS中,而不是将class="grid_3"添加到HTML中。

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

答案 3 :(得分:0)

如果您无法访问标记,则必须复制样式,引用ID,或者您可以使用javascript将该类应用于ID?