javascript - 哪些 CSS 文件会影响网页？

Question

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

所有的 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 回答 2