覆盖 .css 样式表文件（非内联）

Question

有没有办法覆盖默认的CSS样式表（在这种情况下为liquid），但不使用内联样式？

是的，我可以在那个特定页面的<style>标签中使用!important，但我需要重置很多东西。这太费事了，看起来也很混乱。

那么是否有任何方法可以将所有元素重置为默认属性值，并仅在该页面上使用自己的样式？

- tr4nc3

---

如果可以的话，您可以在特定页面中不使用主CSS文件。 - Keno

Answer 1

虽然您无法修改您的 .css 文件，但是您可以使用 js 动态替换文件。

function replaceFile(newFile, fileLink) {
    var oldcss = document.getElementsByTagName("link").item(fileLink);
    var newcss = document.createElement("link");
    newcss.setAttribute("rel", "stylesheet");
    newcss.setAttribute("type", "text/css");
    newcss.setAttribute("href", newFile);
    document.getElementsByTagName("head").item(0).replaceChild(newcss, oldcss);
}

另一种解决方案是使用 jQuery 或 js 添加所需的样式。

$('.demo').css({'background-color':'red','color':'white');

- Alain Cruz

---

您的第一解决方案是我想到的，但我不熟悉液态渲染文件时如何编译文件，在这种特定情况下，我不确定它是否有效。 要访问液体中的任何样式表，我在“index.liquid”中执行以下操作：<link type="text/css" href="{{ 'styles.css' | asset_url }}" rel="stylesheet">因此，我还需要渲染新的样式表，然后使用该新渲染链接替换主题活动链接。 这是正确的吗？ - tr4nc3

Answer 2

CSS代表层叠样式表，因此一旦您添加了样式，只能通过使用另一个样式来更改或删除它。具体回答您的问题，不可以。或者如评论中提到的，只需从特定页面中删除样式表即可。

- Jay

Answer 3

您可以使用 * 选择包装器内的所有元素并进行覆盖：

示例：

.mylink{
  color: red;
}

.mylink:hover{
  color: black;
}

.reset *{
  color: orange;
}

.reset *:hover{
  color: silver;
}

This is the link without reset: 
<a href="#" class="mylink">Link</a>


<div class="reset">
    This is the link with reset: 
    <a href="#" class="mylink">Link</a>
</div>

- ICE