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

Question

Is it possible to somehow override the default (in this case liquid) CSS stylesheet, but without using inline styles? Also I want that style to apply only to that specific page, and not any others.

Yes, I can use !important inside <style> tag on that specific page, but I would need to reset a lot of things. It just too much work, and looks very messy.

So is there any way I could reset ALL elements to default property values, and use my own style just on that one page?

Answer 1

Well you can't modify your .css files, but you can replace files dynamically using 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);
}

Another solution, would be to add the desired styles using jQuery or js .

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

Answer 2

css stands for Cascading Style Sheets so once you've added a style you can only change or remove it by using another style. to answer your question specifically no you can not. or as mentioned in the comments just remove the stylesheet from that specific page.

Answer 3

You can select all elements inside a wrapper with * and override:

Example:

 .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>