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-content
うかsidebar
? その場合、彼.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
このような状況では、それを処理するための良い解決策は何ですか?