Html 如何使浏览器以与内联css相同的优先级处理文件中的css？_Html_Css

Html 如何使浏览器以与内联css相同的优先级处理文件中的css？

html css

Html 如何使浏览器以与内联css相同的优先级处理文件中的css？,html,css,Html,Css,当我将css直接放入HTML中的标记中时，它胜过加载以下内容的文件中的任何css： <link href="foo1.css"rel="stylesheet" type="text/css" /> 但是我不希望html中有任何内联样式。因此，我将css移到了一个名为foo2.css的文件中，并且： <link href="foo1.css"rel="stylesheet" type="text/css" /> <link href="foo2.css"rel=

当我将css直接放入HTML中的标记中时，它胜过加载以下内容的文件中的任何css：

<link href="foo1.css"rel="stylesheet" type="text/css" />

但是我不希望html中有任何内联样式。因此，我将css移到了一个名为foo2.css的文件中，并且：

<link href="foo1.css"rel="stylesheet" type="text/css" /> 
<link href="foo2.css"rel="stylesheet" type="text/css" />

我还尝试：

<link href="foo2.css"rel="stylesheet" type="text/css" /> 
<link href="foo1.css"rel="stylesheet" type="text/css" />

改变顺序。但它似乎不起作用。我怎样才能告诉浏览器像对待内联样式一样对待foo2.css呢！CSS文档中分号之前的重要信息

div {
    width:100px !important;
}

这将覆盖包括内联在内的所有CSS。

您放置的！CSS文档中分号之前的重要信息

div {
    width:100px !important;
}

这将覆盖包括内联在内的所有CSS。

不要使用！重要的你以后会后悔的。相反，使用更强的选择器

.weakSelector{} div.strongerSelector{} strong选择器{} 除法选择器{} html>body>div.wrapper>div.content>section>article>p>a:linksuperUltraMegastrong选择器{} 如果使用相同的选择器，则更强的选择器将出现在文档的后面

使用开发者工具提示：在任何浏览器中点击F12，查看哪个选择器获胜，并使您的选择器更强大

IE开发工具中的跟踪样式选项卡对于识别更强的选择器特别有用：

Chrome的开发工具还将向您展示样式的来源，但有时您必须滚动并搜索样式

当然，还有firebug HTML>样式>显示应用的样式，但没有更多的屏幕截图。。。你明白了-

不要使用！重要的你以后会后悔的。相反，使用更强的选择器

使用开发者工具提示：在任何浏览器中点击F12，查看哪个选择器获胜，并使您的选择器更强大

IE开发工具中的跟踪样式选项卡对于识别更强的选择器特别有用：

Chrome的开发工具还将向您展示样式的来源，但有时您必须滚动并搜索样式

当然，还有firebug HTML>样式>显示应用的样式，但没有更多的屏幕截图。。。你明白了-

！重要信息只能作为最后手段使用。真正的目标应该是增加foo2.css样式的特殊性，因为这是浏览器决定使用哪种样式的方式

如果没有看到您的代码，就不可能确定，但是您可以使用.container类在foo2.css中的每个样式之前添加前缀，如果您有一个前缀，或者如果没有一致的容器，那么您可以使用body作为所有样式的前缀，这样它们比foo1.css样式更具体，从而强制使用它们

使用！重要或通用前缀并不是构建新站点的最佳方式，但如果这是删除内联样式的最简单方式，那么在允许浏览器缓存样式的同时，为了极大地提高可维护性，折衷是值得的。

！重要信息只能作为最后手段使用。真正的目标应该是增加foo2.css样式的特殊性，因为这是浏览器决定使用哪种样式的方式

使用！重要或通用前缀不是构建新站点的最佳方法，但如果这是删除内联样式的最简单方法，那么在允许浏览器缓存样式的同时，为了极大地提高可维护性，折衷是值得的。

如果您的内联样式如下：

<section style="text-align: left; width: 50%; float: right;">
    blah
</section>

没有更严格的结构和样式分离，但它仍然比内联样式和类更好。通过阅读HTML代码，您可以看到结构和主样式，更新样式就像删除/添加其中的类一样简单。我补充说！在.txtlight和.right上很重要，因为意图非常清楚：如果我添加了这些类中的一个，我确实希望应用相关的指令，否则我不会添加它，就这么简单。没有重要的是，任何比类更具体或与类一样具体但在这些规则之后编写的选择器都将应用，而不是这些规则。

.w50是另一种情况：根据经验，您可能需要覆盖IE较低版本的宽度，或者覆盖@media规则中响应性Web设计的宽度，以便添加！“重要”会迫使你在任何地方添加它，你会重新添加越来越多的特殊性。。。嗯

如果您的内联样式如下：

<section style="text-align: left; width: 50%; float: right;">
    blah
</section>

没有更严格的结构和风格分离，但它的方式仍然比内联样式和类更好。通过阅读HTML代码，您可以看到结构和主样式，更新样式就像删除/添加其中的类一样简单。我补充说！在.txtlight和.right上很重要，因为意图非常清楚：如果我添加了这些类中的一个，我确实希望应用相关的指令，否则我不会添加它，就这么简单。没有重要的是，任何比类更具体或与类一样具体但在这些规则之后编写的选择器都将应用，而不是这些规则。

如果你想覆盖css样式，你可以给出覆盖值！重要的如果您有两个值，并且没有或两者都被覆盖，那么您需要重新考虑您的方法。我总是被告知不要使用重要值：您不能简单地编辑foo1.css以合并内联样式吗？我也感觉到了它的用处！重要的是要避免。！重要当然可以被滥用，而且通常是这样，但它仍然是css的一个关键组件。如果您的css对元素产生了不利影响，而这些元素本不应该对其产生不利影响，那么您可以重新组织css类的结构，以便正确的元素只获得它们所需的样式。如果您要覆盖css样式，请给出覆盖值！重要的如果您有两个值，并且没有或两者都被覆盖，那么您需要重新考虑您的方法。我总是被告知不要使用重要值：您不能简单地编辑foo1.css以合并内联样式吗？我也感觉到了它的用处！重要的是要避免。！重要当然可以被滥用，而且通常是这样，但它仍然是css的一个关键组件。如果你的css对元素产生了负面影响，而这些元素并不是你所认为的，那么你可以重新组织你的css类的结构，这样正确的元素就可以得到它们所需要的样式。那么像jQueryUI这样你可能需要覆盖css的情况呢！“重要”比编辑源css文件要好得多！“重要”只是一个可以被滥用或正确使用的工具，用于帮助评论显式行为。@BradM-jQueryUI不引人注目。它使用链接样式表并应用类，而不是设置样式属性值。使用jQueryUI时，您可以定义自己的样式。它们提供了一个基本样式表，可以让您自定义它，或者让您创建一个自定义主题！重要的是，一个由id组成的选择器，没有计算类、伪数和8个元素，你仍然选择后者，真的吗？oO对HTML代码和bam的任何细微更改都不再匹配！我会添加一个特定的类yay，一个只有一个或两个类的选择器，或者一个！重要的是，在我考虑写下一个包含这么多部件的选择器之前，我会修改我的策略…@BradM-还有一件事。对不起，我忍不住我完全不同意这一点：！“重要”比编辑源css文件要好得多。那正好相反！编辑源css文件以使选择器更强大，这比使用更好！重要。@FelipeAls-对，我永远不会使用那个选择器。我只是用它来说明这一点。真的，我只是复制更强的选择器，然后将其包含在文档中。或者，正如您所建议的，在我的HTML中添加一个类，并使用它来增强选择器。对于像jQueryUI这样的情况，您可能需要覆盖css吗！“重要”比编辑源css文件要好得多！“重要”只是一个可以被滥用或正确使用的工具，用于帮助评论显式行为。@BradM-jQueryUI不引人注目。它使用链接样式表并应用类，而不是设置样式属性值。使用jQueryUI时，您可以定义自己的样式。它们提供了一个基本样式表，可以让您自定义它，或者让您创建一个自定义主题！重要的是，一个由id组成的选择器，没有计算类、伪数和8个元素，你仍然选择后者，真的吗？oO对HTML代码和bam的任何细微更改都不再匹配！我会添加一个特定的类yay，一个只有一个或两个类的选择器，或者一个！重要的是，在我考虑写下一个包含这么多部件的选择器之前，我会修改我的策略…@BradM-还有一件事。对不起，我忍不住我完全不同意这一点：！“重要”比编辑源css文件要好得多。那正好相反！编辑源css文件以使选择器更强大，这比使用更好！重要。@FelipeAls-对，我永远不会使用那个选择器。我只是用它来说明这一点。真的，我只是复制更强的选择器，然后将其包含在文档中。O r、正如您所建议的，在我的HTML中添加一个类，并使用它来增强选择器。