javascript - Javascript ツールバー プラグイン CSS 継承

Question

ブラウザのツールバーの関連するボタンをクリックしてアクセスできる小さな JavaScript プラグインを作成しました。

一部のサイトでは問題なく動作しますが、主に親ページから CSS スタイルを取得しているため、見栄えが悪いサイトもあります。

ツールバー プラグインを作成するときに、ツールがブラウザ ページからスタイルを継承しないようにするために、できることや従うべきルールはありますか。

Answer 1

動作中の現象はcss継承です。ページに追加するものはすべて、そのページのcssに従ってスタイル設定されます。クラスを使用して、追加した要素のcssを、ページ自体のcssから適用される他のルールよりも具体的にする必要があります。

新しい要素のcssルールは、それに適用される他のルールよりも具体的である必要があります。話し言葉に少し似ていますが、具体的であるということは、何かをより詳細に参照することを意味します。

ルール1

table tbody td span {font-weight：bold; }

ルール2

テーブルスパン{フォントの太さ：通常; }

この場合、ルール1はより具体的であるため、ルール2よりも「優先」されます。

簡単な説明については、cssの特異性に関するhtmldogのページをご覧ください。

入ってくるスタイルのCSSをクリアして、後でもう一度追加します。それがすべてclass="jibber-nav"のdivにあるとしましょう

あなたはこれを行うことができます：

.jibber-nav,
.jibber-nav ul,
.jibber-nav li,
.jibber-nav a{
  background: none;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

/**** then add style you want *******/

.jibber-nav li{
  border: 2px solid #123456;
  border: radius: 4px;
}

.jibber-nav a{
  color: #097654;
}

他のすべてが失敗した場合は、すべてのcssルールに！importantを追加できますが、それはあなたを悪い人にし、信頼されないようにします。実際には、コードを操作するのに大きな混乱を招くリスクが高まるだけですが、それは同じことです。