1

HTML、JavaScript、および CSS を使用してウィジェットを作成し、ウィジェットをライブラリとしてまとめてパッケージ化すると、

.foobarwidget-sidebar-section .sub-section { border: 1px solid #000 }

そのため、JavaScript を実装して、定義したこのウィジェットの動作で動作するようにします。このウィジェットは、Web サイトの任意のページで、または他の人が使用できます。

しかし、このウィジェットのユーザーがいて、そのユーザーが自分の Web ページに「サブセクション」用の HTML を持っている場合:

.sub-section { color: green }

.sub-section次に、ウィジェットの CSS スタイルにほとんどの要素を追加します。

彼が使えるのは本当です

#the-main-content .sub-section { color: green }

また

.a-main-content-box .sub-section { color: green }

ウィジェットに影響を与えないようにしますが、ボックスにウィジェット (または検索ボックス ウィジェット、またはソーシャル リンク ボタン ウィジェット) が含まれる設計になっている場合はどうなるでしょ#main-contentsidebar? その場合、彼.sub-sectionは再びウィジェットの CSS に影響を与えます。

もちろん、ウィジェットに可能なすべての CSS スタイルを定義できます。

.foobarwidget-sidebar-section .sub-section { color: blue !important;
                                             font-weight: bold !important;
                                            /* ... and all possible CSS styles ... */
                                           }

しかし、それは実行可能な良い解決策のようには見えません。私たちも使うかもしれません

.foobarwidget-sidebar-section > .sub-section { ... }

は直接の子である必要がありますが、ウィジェットの CSS に影響.sub-sectionを与えるスタンドアロンには影響しません。.sub-sectionこのような状況では、それを処理するための良い解決策は何ですか?

4

4 に答える 4

1

このようなことを処理する必要がある Disqus は、ウィジェットをiframe親のスタイルシートの影響を受けない 内に配置することで問題を解決することを選択しました。他の一般的なウィジェットもこれを行うと思います。

于 2013-04-28T00:40:02.283 に答える
1

ウィジェットには、次のような一般的ではないクラスを使用する必要があります.my-custom-widget-name-sub-section

于 2013-04-28T00:49:34.643 に答える
0

jQueryを使用して、cssファイルを頭の最後に置くことができます:

$('head').append('<link rel="stylesheet" href="yourcss-last.css" type="text/css" />');
于 2013-04-28T01:19:49.820 に答える