Question

我在伦敦正在开发一个应用程序，而html / css的人在纽约。他每天都会通过电子邮件向我发送更新，因为我们没有可以使用的源代码控制设置，我经常对他的CSS进行小的更改，因此每次我从他那里得到一个新文件时，我都必须重新应用我的所有更改对它来说，显然我做的工作越多，每次都需要的时间越长。

我有想法制作我自己的单独样式表，但有没有办法告诉浏览器给我的sylesheet更高的优先级并覆盖他的任何具有相同类名和属性的样式？

这不会是一个公共网站，所以我们只会支持最新的浏览器。

Answer 1

这取决于您在标题中设置它们的方式。所以这样的事情会起作用：

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

最后一个将被拿起。

这里有关于样式表的有用链接： http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

另请参阅：Precedence in CSS如果上述内容对您不起作用。

希望很清楚。

Answer 2

我个人严格禁止使用！重要。从here了解真正重要的内容。

你应该知道：

.some-class .some-div a {
    color:red;
}

总是比（在这种情况下上诉顺序无关紧要）更重要：

.some-class a {
    color:blue;
}

如果你有（两个具有相同级别的声明）：

.some-class .some-div a {
    color:red;
}

.some-class .some-div a {
    color:blue;
}

使用后来的声明。正如@Kees Sonnema写的那样，头文件中包含的文件也是如此。

Answer 3

CSS规则按顺序应用。所以，你所要做的就是将CSS包括在最后，包括所有其他CSS。

Answer 4

Css规则是顺序的，您应该在html文件上做两件事

将您的CSS包含为最后一个css
在css文件中的所有css属性上添加！important Eg: position : absolute !important;

应该符合您的目的

Answer 5

在某处我读到它不是关于在之前或之后调用哪个CSS文件，而是实际首先加载的文件。例如，如果您的第一个CSS文件足够长以继续加载而下一个（基本理论应该具有更高的优先级）已经加载，那么之后加载的这些行将具有更高的优先级。这很棘手，但我们必须意识到它！具有特异性的技术对我来说是合法的所以更具体的（#someid .someclass div而不是.someclass div）优先级更高。

Answer 6

我在stackoverflow中找到了一篇帖子。我认为这对你有所帮助。

An efficient way to merge 2 large CSS files

如果你想真正合并你的文件，那么这将是有用的，我想。

以更具体的方式指定CSS也会对您有所帮助。

像：

td.classname{}
table.classname{}

Answer 7

它的工作原理如下：

<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">

第二style.css文件：

@import 'third-style.css';

导入的最后一个样式是所有规则都坚持的样式。例如：

第一style.css文件：

body{
    size:200%;
    color:red;
}

第二style.css文件：

@import 'third-style.css';
p{
    color:red;
}

第三style.css文件：

p{
    color:green;
    size:10%
}

结果样式为：

body{
    size:200%;
    color:red;
}
p{
    color:green;
    size:10%

注意：如果您添加！重要规则，则会有所不同。例如：

第一style.css文件：

body{
    size:200% !important;
    color:red !important;
}

第二style.css文件：

@import 'third-style.css';
p{
    color:red;
}

第三style.css文件：

p{
    color:green;
    size:10%
}

结果将是：

body{
    size:200% !important;
    color:red !important;
}

我希望这有帮助！

Answer 8

我使用CSS优先级规则如下：

第一条规则是带有html的内联css，可以满足任何类型的css。
第二条规则作为关键字使用！在值后的css声明中很重要。
第三条规则作为html标题样式表链接优先级顺序（自定义css样式表后的主要css样式表）。

基本上用户想要使用第三条规则也希望将bootstrap css发送到自定义css，例如：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   

<!-- App Custom CSS -->
<link rel="stylesheet" href="assets/css/custom-style.css">

Answer 9

我最近发现使用 :nth-child(n) 是一把瑞士军刀，即使不使用 !important 也有助于优先

div{
    height:20px;
    width:20px;
    background-color:green
}

div:nth-child(n){
  background-color:blue
}

<div><div>

一个CSS文件可以优先于另一个CSS文件吗？

9 个答案: