哪些 CSS 文件会影响网页？ [复制]答案

【问题标题】：Which CSS files affect a web page? [duplicate]哪些 CSS 文件会影响网页？ [复制]
【发布时间】：2013-06-25 19:42:39
【问题描述】：

我有一个导入超过 10 个外部 css 文件的网页。我使用 Chrome 开发者工具来检查一个元素并尝试判断网页正在使用哪些 css 文件。页面最初加载后，我浏览了每个元素以查看它引用的 css。

问题是有 javascript 功能可以将类添加到某些元素，我不知道如何复制所有这些状态。有没有办法确定哪些css文件对网页没有影响？

【问题讨论】：

最简单的解决方案可能是删除外部css文件，看看会发生什么。
不是重复的；该答案与javascript无关。
Gengar，我在想如果你只有 10 个外部 CSS 文件，那么简单地暴力破解它不会太难。一次删除一些，看看会发生什么，然后进行相应的调整。
@quinxorin 我在这里看到的唯一问号是在最后一句话和标题上。
我对作者选择使用有限数量的问号如何确定问题是否重复感到困惑。请注意他的陈述“问题是有 javascript 功能可以将类添加到某些元素，我不知道如何复制所有这些状态。”我不相信你引用的问题解决了他问题的那一部分。

【解决方案1】：

所有的 CSS 文件都会影响网页，但最后一个选择器是唯一影响元素的。

例如，如果我使用以下 CSS 文件：

<head>
 <link rel="stylesheet" url="css/style1.css" media="screen">
 <link rel="stylesheet" url="css/style2.css" media="screen">
</head>

以下是样式：

样式 1 CSS

a { color: black; }

样式2 CSS

a {
    text-decoration: none;
    color: blue;
}

链接会有什么颜色？黑色且没有下划线，因为最后一个 color 属性在最后一个 CSS 文件中，而在最后一个 CSS 文件中有 text-decoration 属性。

狮子座！

【讨论】：

【解决方案2】：

如果您的页面有 Javascript 生成动态内容，那么您永远无法知道给定的 CSS 规则是否会影响页面上的某些内容。浏览器会加载所有 CSS 规则（按优先级规则排序），因此所有 CSS 文件在某些时候可能会对页面内容产生一些影响。

如果您的页面只是静态内容，那么它就成为一个有争议的问题，但是如果您的页面在某个时候加载了带有一些新内容的模态窗口，则无法知道您认为其中一个 CSS 文件是否不是used 将应用于该新内容。

【讨论】：