'How can I override styles of a local html page using Firefox userContent.css?

I'm using, to no avail, @-moz-document url within the file userContent.css to apply CSS rules in a specified URL. Here are the HTML and CSS code:

HTML (page.html)

...
<style type="text/css">
.mood {
    background: pink;
}
</style>

<body>
    <div class="mood">
    </div>
</body>

The CSS rule I added in userContent.css:

@-moz-document url (C:/Users/User/Documents/page.html) {
    .mood {
        background: red !important;
    }
}

I have other overriding rules in said userContent.css that do work if the specified URL is a website, e.g. @-moz-document url (website.com) For these other rules I don't have to write HTML code, though.

I also tried adding file://, file:///, file:///// before the address: (file://C:/...) as I saw this suggested in an apparently related topic in http://kb.mozillazine.org/Links_to_local_pages_do_not_work

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions