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

【问题标题】：Override .css stylesheet file (not inline)覆盖 .css 样式表文件（非内联）
【发布时间】：2019-01-27 18:25:29
【问题描述】：

是否有可能以某种方式覆盖默认（在这种情况下为液体）CSS 样式表，但不使用内联样式？此外，我希望该样式仅适用于该特定页面，而不适用于任何其他页面。

是的，我可以在该特定页面上的<style> 标签内使用!important，但我需要重置很多东西。工作量太大，而且看起来很乱。

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

【问题讨论】：

如果可以的话，您不能在该特定页面中使用您的主 css 文件

标签： javascript html css liquid

【解决方案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');

【讨论】：

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

【解决方案2】：

css 代表层叠样式表，因此一旦您添加了一种样式，您就只能通过使用另一种样式来更改或删除它。具体回答你的问题否你不能。或者如 cmets 中所述，只需从该特定页面中删除样式表即可。

【讨论】：

【解决方案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>

【讨论】：