65

我在伦敦处理一个应用程序，而 html/css 人在纽约。他每天通过电子邮件向我发送更新，因为我们没有设置我们都可以使用的源代码控制，我不断地对他的 css 进行小改动，所以每次我从他那里得到一个新文件时，我都必须重新应用我的所有更改显然，我做的工作越多，每次花费的时间就越长。

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

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

4

9 回答 9

82

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

<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

另请参阅：如果上述内容不适合您，则CSS 中的优先级。

希望很清楚。

于 2013-06-04T08:35:59.353 回答
15

我个人强烈反对使用！important。从这里了解什么是真正重要的。

你应该知道：

.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 所写的 head 标签中包含的文件也是如此。

于 2013-06-04T08:44:37.247 回答
4

CSS 规则按顺序应用。所以，你所要做的就是最后包含你的 CSS，毕竟其他的。

于 2013-06-04T08:34:04.347 回答
3

Css 规则是顺序的，你应该对你的 html 文件做两件事

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

那应该服务于您的目的

于 2013-06-04T08:36:30.263 回答
3

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

于 2015-09-07T05:22:23.517 回答
1

我在stackoverflow中找到了一个帖子。我想它可以帮助你。

合并 2 个大型 CSS 文件的有效方法

如果您希望实际合并您的文件，那么这将很有用，我猜。

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

像：

td.classname{}
table.classname{}
于 2013-06-04T08:58:51.727 回答
1

它是这样工作的：

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

第二种样式.css：

@import 'third-style.css';

最后导入的样式是所有规则都遵循的样式。例如：

第一样式.css：

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

第二种样式.css：

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

第三种样式.css：

p{
    color:green;
    size:10%
}

生成的样式将是：

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

注意：如果添加 !important 规则，则不同。例如：

第一样式.css：

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

第二种样式.css：

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

第三种样式.css：

p{
    color:green;
    size:10%
}

结果将是：

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

我希望这有帮助！

于 2015-12-21T19:27:14.780 回答
0

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

  1. 第一条规则是带有 html 的内联 css，它将处理任何类型的 css。

  2. 作为关键字的第二条规则在值之后的 css 声明中使用 !important。

  3. 第三条规则作为 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">
于 2017-01-16T19:11:35.733 回答
0

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

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

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

于 2021-05-02T04:39:22.780 回答