-1

スタイルを含むcssファイルがあります：

button-text-only {
    padding: .4em 1em;
}
.ui-buttonse {
    margin-right: 7px;
}
.ui-datepicker {
    left: 2px;
}
... and etc ...

CSSスタイルが実際にid = "date_catr"のコンテナ内にあるようにするにはどうすればよいですか?

4

2 に答える 2

0

上記のすべてのルールの前に #date_catr を次のように付けます。

#date_catr button-text-only {
    padding: .4em 1em;
}
于 2013-08-23T09:11:11.957 に答える
0

コンテナ ID をルールの前に付けることができると述べられているように、これにアプローチできると思われる方法がいくつかあります。

#date_catr button-text-only {
    padding: .4em 1em;
}
#date_catr .ui-buttonse {
    margin-right: 7px;
}
#date_catr .ui-datepicker {
    left: 2px;
}
etc.

残念ながら、これを 50 ～ 100 のスタイルに適用する必要がある場合、不要な CSS がかなり追加され、CSS の適用速度がわずかに低下する可能性があります (モバイル デバイスではより顕著になります)。

問題は、上記以外に、実際にやりたいことを実行する方法がほとんどないことです。

scoped stylesを使用することもできますが、これは素晴らしいアイデアのように思えますが、現在これをサポートしているブラウザーは Firefox だけであることに気付くまでは(そして、見た目からして、近い将来にこれをサポートする唯一のブラウザーであることに気付くまでは)。

また、iframe を介して HTML を含めることもできます。目的の CSS を iframe 内にインラインで配置し、iframe 内の CSS は iframe 内でのみ適用され、ページに適用された css は iframe 内のコンテンツには影響しません。これは基本的に、ブラウザーが完全にサポートされていることを除いて、上記のスコープ付きスタイル ソリューションと似ています。

ただし、iframe は少し乱雑になり、ページに不必要な肥大化を追加し、維持するのが少し面倒になる可能性があります。

私が考えることができる他の唯一の解決策は、css のプレフィックスを付けて css で変更することです。これは、css が実際にはそれほど大きくならないことを意味し、css が適用される速度が影響を受けないようにすることも保証します。ただし、面倒で保守が面倒になる可能性があります。投稿したクラスから要素に基本スタイルを継承させたいかどうかはわかりません...次のように見えるかもしれませんが、

.i-button-text-only {
    padding: .4em 1em;
}
.i-ui-buttonse {
    margin-right: 7px;
}
.i-ui-datepicker {
    left: 2px;
}
etc.

個人的には、オプション 1 を選択します。後で詳細性の問題に対処する必要がないように、おそらくクラスを使用します。少し遅くなりますが、ほとんど目立たないはずです (うまくいけば)。

于 2013-08-23T09:31:09.280 に答える