在同一个html文件中使用两个css文件答案

【问题标题】：Using two css files in the same html file在同一个html文件中使用两个css文件
【发布时间】：2010-09-27 05:22:59
【问题描述】：

是否可以在同一个 HTML 文件中使用 2 个具有相同名称的选择器等 CSS 类？如果是这样，在设计元素时如何区分两者？

【问题讨论】：

标签： css css-specificity

【解决方案1】：

是的，这是可能的。第二个文件中的定义将覆盖第一个文件的定义。没有办法区分两者，只能根据文件添加类名。

【讨论】：

【解决方案2】：

你的意思是同一个类有两个定义吗？还是一个元素上的 2 个类名？

第一种情况，没有。

<style>
  .foo{
    border:1px solid blue;
    color:red;
  }
  .foo{
    border:4px solid orange;
  }
</style>
<div class="foo">this will have an orange border and red text (no blue border)</div>

第二种情况，是的

<div class="class1 class2">this is valid</div>

【讨论】：

2 个类似的类名在 2 个单独的文件中。
嗯，没错。但是，误导。每个新定义都会扩展/覆盖最后一个。 “foo” div 仍然会有红色文本。
我的错，我的代码示例与我的想法不符。 Xaisoft：如果名字不同，那你完全没问题，你可以为所欲为。唯一的问题是名称是否完全相同。

【解决方案3】：

...具有相似名称的选择器

如果名称确实相似而不是相同，那么应该没有问题。

【讨论】：

好吧，那么覆盖你已有的答案就是正确的答案。

【解决方案4】：

是的，这是可能的，只需在文档的 HEAD 部分包含两个 css 文件。第一个中设置的任何样式都将在第二个中被覆盖，所以假设你有这个：
第一个文件：

 #something{
  background-color: #F00;
  color: #FFF;
 }

然后在第二个文件中：

 #something{
  background-color: #000;
 }

然后#something 的背景颜色将在第二个文件中被覆盖为黑色，但颜色将保持不变，因为第二个文件没有说明它。

【讨论】：

请记住，这只会在相同的特异性下发生 - 如果之前的那个是 #something .blah，那将会胜出。

【解决方案5】：

这应该可以，试试吧。

<style>
  .foo{
    border:1px solid blue;
    color:red;
  }
  .foo{
    border:4px solid orange !important;
  }
</style>
<div class="foo">this will have an orange border and red text (no blue border)</div>

【讨论】：