0

我为我的网站构建了一个小部件，并在加载时动态添加了 CSS，但问题与主机网站 CSS 文件冲突。以下代码适用于我的小部件，它在加载时附加了 CSS 文件：

function main() {
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://example.com/widget/green.css"
        });
        css_link.appendTo('head');
        var txt;
        txt='<div id="wrapper">';
        txt=txt+'<ul class="tabs">';
        txt=txt+'<li id="fixtures_tab"><a href="#fixtures">Hepsi</a></li>';
        txt=txt+'<li id="live_tab"><a href="#live">Canlı</a></li>';
        txt=txt+'<li id="finished_tab"><a href="#finished">Bitmiş</a></li>';
        txt=txt+'<li id="program_tab"><a href="#program">Başlamamış</a></li>';
        txt=txt+'<li id="postpond_tab"><a href="#postpond">Ertelenen</a></li>';
        txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Oyunlarım (0)</a></li>';
        txt=txt+'</ul>';
        txt=txt+'<div class="tab-container">';
        txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>';
        txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'</div>';
        txt=txt+'</div>';
        $('#widget-container').html(txt);
    });
}

我想知道有什么方法可以隔离我的小部件的 css 吗？

顺便说一下，从匿名函数调用主函数（出于隔离目的）

PS：我使用了css reset，但仍然是同样的问题。

4

1 回答 1

1

您可以命名所有 CSS。这将避免您遇到常见的 CSS 类名（如containeror ）的问题wrapper，例如：

.my-amazing-widget--tab-container {
    height: 100px;
}

如果您的所有 CSS 都像上面那样命名，那么网站不太可能在其 CSS 中包含您的小部件名称。

我会避免像!important另一个用户在他们的评论中建议的那样使用声明——如果你重写一个公共类，你的样式最终可能会对网站的样式产生负面影响。

我还会避免任何全局声明，例如将 CSS 重置导入您的小部件。CSS 重置覆盖元素，如 body、div 等，这可能会对主机网站的 CSS 产生负面影响。

您将需要更新所有相关的 HTML 以使用命名空间。CSS 命名空间是解决此类问题的最佳方法，也是开发要嵌入其他网站和应用程序的小部件时的最佳实践。

于 2015-06-08T23:11:42.467 回答