CSS: Dosyalar arasındaki etkileşim

Question

Bir CSS dosyası üzerinde çalışıyorum ve anothet CSS dosyasıyla etkileşimde bulunmak istiyorum. Nasıl? Diyelim ki A.css ve B.css var. A.css'de, B.css'e ve kontrol ettiği tüm öğelere atıfta bulunulan "taşma: gizli" yapmak istiyorum. Bunun gibi bir şey imkansız mı?

gibi:

@import "field.css" 

.sky .field { 
overflow:hidden; 
} 

Yani temelde bu aslında ne var:

Şimdi

.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; 
} 

istediğim Bunun dışında göstermez için .field bir alt etikettir "p" .sky'nin sınırları. Bunu nasıl yaparım?

Answer 1

Tek bir CSS dosyasını diğerine aktarmak için HTML'nizdeki her iki CSS dosyasına bağlantı eklemeniz yeterli değildir.

.sky .field { 
    overflow:hidden; 
} 

Dosya B:

.sky { 
    color: black; 
} 

Sky taşma gizli ve siyah renk her iki özelliklerini miras Örneğin aşağıdaki iki dosya

Dosya A olsaydı. Kurallar birbiriyle çelişirse, örneğin A dosyası gökyüzü renginin mavi olduğunu ve B dosyasının siyah olduğunu ve son olarak bağlantılı olan CSS kural sayfasının başkanlık olacağını söyler.

Düzenleme: Genelde bunu kuruluş amacıyla yapmak iyi bir uygulama değildir. Gökyüzü tek bir itiraz ise, tüm CSS referanslarını tek bir dosyaya koymayı düşünün.

Answer 2

Her iki CSS dosyasını da sayfanıza yükleyin. Aynı öğede stil kurallarını tanımlayan birden çok dosyaya sahip olabilirsiniz. Yani

File 1

.sky{ 
    background-color: Red; 
} 

Ve

.sky.field { 
    overflow:hidden; 
    } 

File 2 Ve sayfa sınıf div ve alan sahip bir öğesi vardır diyelim iki dosya var diyelim.

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

Şimdi bu hem birleşik CSS kurallarına sahip olacaktır. Ayrıca

---

2 dosya ne olur daha sonra aynı elementin farklı CSS kuralı varsa, CSS Öncelikleri ile kendinizi tanımak emin olun ??

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


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

Şimdi diğer kurallar üzerinde daha fazla önceliğe sahip olacaktır HTML DOM son yerleştirilir dosya

Example. Önceliği alan its NOT the last file loaded but the last file in the DOM hirarchy olduğunu unutmayın.