2011-12-29 9 views
1

私は様々なスタイルシートにリンクされたフォームを持っています。 selectタグのスタイルを持つ2つのスタイルシートがあります。だから私は両方のスタイルシートをリンクするときに競合する。例特定のスタイルシートから要素にスタイルを手動で適用する方法はありますか?

については

私はselectタグのスタイルが含まれていstyle1.cssとstyle2.cssを持っています。私はselect1とselect2のIDを持つ2つのselectタグを持っています。

style1.cssのスタイルのみをselect1に適用し、style2.cssをselect2に適用します。どうすればいいですか?

他の選択タグにも影響するため、特定のIDにスタイルを指定することはできません。

異なるスタイルシートのスタイルを特定の場所でのみ動作させるにはどうすればよいですか?

+2

私の知る限りでは、それはクライアント側の技術では不可能です:。このよう - スタイルシートがロードされると、それは私たちの手から抜け出します。ただし、サーバーサイド言語を自由に使用できる場合は、それらのスタイルシートを「マージ」して、必要に応じてフィルタリングされた最終的なスタイルシートを1つ提供できます。 –

+0

いずれのスタイルシートでもCSSセレクタを変更しなければ、これはできません。 – Sjoerd

答えて

1

CSS3の:not()セレクタを使用できます。例えば、style2.cssでは、次のように記述します。

select:not(#select1) { 
    // styling here will be applied to all selects except select1 
} 

しかし、現実には、あなただけの1つのCSS文書でselectタグのすべてのスタイルを維持する必要があります。この方法で、競合をより簡単に制御できます。

+0

IE8以前では、セレクタはサポートされていません。 IE9や他のブラウザがそれをサポートしています。 – psur

0

CSSは、最後の設定が最も重要なように機能します。ですから、最初style1.cssをリンクすることができ、その後、style2.css終了style2.cssであなたはselect1のスタイルを定義することができます。

#select1 
{ 
    /* styles */ 
} 

それが他の要素に影響を与えないだろう、だけselect1

しかし、一般的には、1つのスタイルシートで選択するためのスタイルをマージする必要があります。

0

style1 idのクラス名をclass="style-one"と定義し、要素スタイルに!importantというタグを付けてスタイルを定義できます。

.style-one{border:none !important;} 

しかもあなたは順序を変更せずに使用しているスタイルシートのいずれかで、このクラスを定義することができます:)

関連する問題