有没有办法只为页面的特定部分（即标题）加载外部样式表并为所有其他部分“卸载”该样式表？

Question

I am trying to integrate a help center (from Zendesk) seamlessly. For that I have copied the Header and the Footer of our mainpage into the help center page. I apply the CSS of the external page in the header with this:

<link href=".../web/cache/Test.css" media="all" rel="stylesheet" type="text/css" />

The problem is that using that it will apply the stylesheet to the entire page and mess up all the other articles and content.

I need a way to apply the stylesheet only to a specific part of the page(the header). Another note is that the stylesheet is huge, and I cannot edit it in any way(eg editing the selectors to only apply to the header class)

I tried searching for solutions but only came up with 8 year old posts about using something like <style scoped> , though that also seemed outdated.

I also tried using this javascript function I found, to no avail:

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) {
    callbackSuccess = callbackSuccess || function(){};
    callbackError = callbackError || function(){};
    $.ajax({
        url: cssUrl,
        dataType: "text/css",
        success: function(data) {
            applyCSSToElement(data, elementSelector);
            callbackSuccess();
        },
        error: function(jqXHR) {
            callbackError();
        }
    })
}

Answer 1

How about this?

• store the relevant code you need INSIDE Zendesk Help Center code area
• check with Java or Jquery the relavent conditions
• is the element of the page present AND is the URL of the page the one you want to have your script executed
• if the above is true
• execute your code via Jquery