如何手动将样式从特定样式表应用到元素?

时间:2011-12-29 08:21:09

标签: javascript css3

我有一个与各种样式表相关联的表单。我有两个样式表,其中包含select标签的样式。因此,当我链接两个样式表时,它会发生冲突。

例如

我有style1.css和style2.css,其中包含select标签的样式。我有两个选择标签,其中包含ids select1和select2。

我只想将style1.css中的样式应用于select1,将样式从style2.css应用到select2。我该怎么办?

我无法为这些特定ID指定样式,因为它也会影响其他选择标记。

如何让不同样式表的样式仅在特定位置使用?

3 个答案:

答案 0 :(得分:1)

您可以使用CSS3的:not()选择器。例如,在style2.css中,您可以写:

select:not(#select1) {
    // styling here will be applied to all selects except select1
}

但实际上,您应该在一个CSS文档中保留select标记的所有样式。这样您就可以更轻松地控制冲突。

答案 1 :(得分:0)

CSS以最后设置最重要的方式工作。因此,您可以首先关联style1.css,然后style2.css以及style2.css ,您可以为select1定义样式:

#select1
{
  /* styles */
}

它不会影响任何其他元素,只会select1

但通常你应该在一个样式表中合并选择的样式。

答案 2 :(得分:0)

您可以将style1 id的类名定义为class="style-one",然后通过为元素样式提供!important标记来定义样式。 像这样:

.style-one{border:none !important;}

此外,您可以在不使用顺序的情况下在任何样式表中定义此类。:)