CSS：ファイル間の相互作用

Question

私はCSSファイルで作業しています。私はanothet CSSファイルとやりとりしたいと思います。 どのようにですか？ A.cssとB.cssがあるとします。 A.cssでは、B.cssおよびそれが制御するすべての要素に関連して「オーバーフロー：隠された」ことをやりたいのです。 そのようなことは不可能ですか？

同様：

@import "field.css" 

.sky .field { 
overflow:hidden; 
} 

だから、基本的に、この私が実際に持っているもの：

.sky { 
width: 90%; 
height: 100%; 
background: blue; 
opacity: 0.7; 
position: absolute; 
z-index: 1; 
} 

.field { 
width: 100%; 
height: 20px; 
background: green; 
position: fixed; 
top: 90%; 
z-index: 2; 
} 

.field > p { 
width: 100%; 
height: 40px; 
background: black; 
} 

を今私が欲しいの外に表示されないように選択図】図のサブタグである「P」、その.skyの境界。 どうすればいいですか？

Answer 1

CSSファイルを別のCSSファイルにインポートする必要はありません.HTMLの両方のCSSファイルにリンクするだけです。

.sky .field { 
    overflow:hidden; 
} 

ファイルB：あなたは次の2つのファイル

ファイルAがあった場合たとえば

.sky { 
    color: black; 
} 

をスカイは、オーバーフロー隠され、カラーの黒の両方の性質を継承します。ルールが互いに矛盾する場合、たとえばファイルAは空色が青、ファイルBが黒と表示され、最後にリンクされたCSSルールシートがプレゼンテーションになります。

編集：一般的に、組織の目的でこれを行うのは良い方法ではありません。 Skyが単一の異論であれば、すべてのCSS参照を1つのファイルに入れることを検討してください。

Answer 2

両方のCSSファイルをページに読み込みます。実際には、同じ要素に対してスタイルルールを定義する複数のファイルを持つことができます。だから、2つのファイル

File 1

.sky{ 
    background-color: Red; 
} 

そしてFile 2

.sky.field { 
    overflow:hidden; 
    } 

を持っており、ページは、クラスのdivとフィールドを持つ要素を持って言うことができます言うことができます。

<div class='sky field'></div> 

これで、両方のCSSルールが組み合わせられます。また

---

2つのファイルは何が起こるか、同じ要素に異なるCSSルールを持っている場合は、CSSの優先と自分が慣れることを確認してください？

Example

//File 1 
.sky{ 
    background-color: Red; 
} 


//File 2 
.sky.field { 
    background-color: Blue; 
    } 

今HTML DOMの最後に配置されファイルは、他のルール上より優先されます。優先度を取得するits NOT the last file loaded but the last file in the DOM hirarchyに注意してください。