Question

我有三个很大的CSS文件。这些类中的相同名称具有相同的名称但位于不同的文件中。

实施例： CSS1：

    ...
.btn-primary {
  background: #000;
}
    ...

CSS2：

    ...
.btn-primary {
  background: #fff;
}
    ...

和CSS3：

    ...
.btn-primary {
  background: #4285F4;
}
    ...

我们假设在我的HTML页面中调用了所有三个CSS。有没有办法在我的网页中只选择CSS3中的.btn-primary类？如果是的话，我怎么能这样做？

Answer 1

没有

如果样式表被加载到页面中，并且它有一个带有与元素匹配的选择器的规则集，那么它将应用于该元素。

为特定属性提供冲突信息的规则将在standard cascade order中相互覆盖。

Answer 2

不是这样，但你可以改变你的样式表，使其如下所示：

.btn-primary, .btn-primary.style1 { ... }


.btn-primary, .btn-primary.style2 { ... }


.btn-primary, .btn-primary.style3 { ... }

然后，您可以使用以下类来获取特定样式：

<a class='btn-primary style2'>Stylesheet 2</a>

简而言之，您需要添加某种缩小不同风格的其他方法。

-

另一种可能性是将您的css文件转换为scss，如下所示：

.style1 {
    .btn-primary { ... }
}

然后您可以使用特定工作表中的样式，如下所示：

<div class='style1'>
    <a class='btn-primary'>Stylesheet 1</a>
</div>

Answer 3

抱歉：在我看来，以下是一个错误的解决方案。我想添加它，因为我可以想到你必须找到这种hacky方式而不是更改css文件的情况。

一般来说，正如Quentin和Bryant所指出的那样 - 对于css文件没有“命名空间”，所以如果你加载所有的css文件，你最终会得到最后一个覆盖文件的选择器类（在名称冲突的文件中）并且无法在它们之间做出选择。

如果（由于一些奇怪的原因）您不关心Chrome用户 - 您可以使用cssRules对象的rules或document.styleSheets[i]属性 - 为每个加载的样式表文件（i是文件的编号）。如上所述，这种方法does not work for Chrome。出于某些原因，cssRules和rules在Chrome中为每个styleSheets[i]都为空。

我的hacky解决方案：

根据需要加载所有css文件后，
在javascript代码中，阅读您选择的css文件作为文本文件。您可以使用AJAX - 请参阅this question and its answers
在您收到的文本中搜索所需的选择器并提取该字符串。例如，您可以解析整个文件并获取相关部分。

在搜索如何帮助完成此步骤时，我遇到了document.styleSheets[i].cssRules对象以及在Chrome中无效的方法。
围绕它构建样式元素，并将该样式元素追加到head元素（here's an answer that shows how to create and append style elements to the head element）。

这似乎是一种错误的方法，从几个原因（性能，优雅，可读性）来做 - 并且可能意味着css文件的设计不适合您的项目（看看Bryant的建议） - 但我想要这个答案在这里，因为是一种方法来做，虽然是一个hacky，如果由于某种原因你不能改变css文件并且必须按原样使用它们 - 那么你去

Answer 4

我不知道这是什么用法，我的意思是有三个文件并存储不同的样式甚至相同的样式。

但是有一些工具会对CSS进行规范化和缩小，例如，请查看Nano CSS

但是，正如其他答案所说，无法说出哪个类适用于此页面的哪个类，并且它们将覆盖并且最后一个样式将适用于该元素。

以下是一个了解覆盖如何工作的示例：

＆＃13;

#test-link {
  display: block;
  text-decoration: none;
  background: red;
  color: white;
}
#test-link {
  background: green;
}
#test-link {
  background: orange;
}
#test-link {
  background: black;
}

＆＃13;

<a id="test-link" href="javascript:void(0);">Test link</a>

＆＃13;

如您所见，只是应用于background颜色的最后一种风格

如何从CSS中选择某些属性？

4 个答案: