Outsourcing css özelliği çalışmıyor

Tüm araştırmamıza ve denemeye rağmen çözemediğim basit bir sorunum var. Bir css özelliğini bir dosyaya taşımak istiyorum. <li> Element ist'in altındaki kod pasajında, ikinci sırada olduğu gibi düzgün görüntülenmeyecektir. Outsourcing css özelliği çalışmıyor

Benim CSS Dosyası:

.navBarItem 
{ 
    padding-left: 0px; 
}

Benim HTML Dosya: Ben o css dosyasını içe, özellikle başka bir dosyaya verilen özellik koyarak hiçbir fark yaratacağını düşündük

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" /> 
    <link rel="stylesheet" href="css/design.css" /> 
</head> 

<body> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-collapse collapse" id="navBar"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#" class="navBarItem">Action</a></li> 
        <li><a href="#" style="padding-left:0px;">Action</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</body>

en son.

kaynak

2016-04-11 JRsz

o çalışmalıdır, ancak daha karmaşıktır - [bu soru] bölümüne bakın (http://stackoverflow.com/questions/2876575/css-rule-priorities) ve [MDN: Özelliği] (https://developer.mozilla.org/en/docs/Web/CSS/ Özgünlük). Hangi kuralın sizin tarafından konduğunu görmek ve en azından belirli bir şekilde (veya '! Önemli') eklemesini görmek için tarayıcı konsolunuzun HTML sekmesini kontrol edin. – Kenney

Stil kuralınız 'theme.less' ve 'bootstrap.css' tarafından geçersiz kılındı.sorununuza en kolay düzeltme için css değişiyor:

.navBarItem { 
    padding-left: 0px !important; 
}

yüzden yeni özellik, en yüksek öneme sahip kabul edilir.

doğru ilk 'Eylem' bağlantısını tıklayın ve Eleman (Krom) kontrol ederse, kendi stil geçersiz kılar tam css özellik bu olduğunu göreceksiniz: Kendi kural için, Şimdi

.nav > li > a //found in bootstrap.css at line 3972

en yüksek öneme sahip olduğu, ilk niteliklerinden inheritances tutmak ve "bir" kendi sınıfı ile, şöyle değiştirmek zorunda:

.nav > li > .navBarItem { 
    padding-left: 0px;

}

kaynak

2016-04-11 19:30:39 arch1ve

Bu problemi çözüyor ama kullanmadan bir yol biliyor musunuz? – JRsz

Orijinal cevabı sizin ihtiyaçlarınıza göre düzenledim. Sorun, kuralın tanımının ne kadar spesifik olduğudur (yani .nav> li> a), daha basit olana göre önemi artar (yani .navBarItem). – arch1ve

Bu güzel, mükemmel çalışıyor, teşekkürler. "Daha iyi" bir yol var mı yoksa eşit derecede verimli mi? – JRsz

İlk durumda ( sınıfını kullanarak ) kullandığınız gerçek seçicinin özgüllüğü ile oynarsınız. .navBarItem tek bir sınıftır, bu yüzden daha spesifik bir şey tarafından geçersiz kılınır. İkinci durumda

ancak kural harici dosyasında olduğunu

Yani sorun değil (!important kullanarak yanında ) en yüksek özgüllük vardır style özniteliği (satır içi stil) kullanan ancak daha yüksek özgüllüğe sahip başka bir kural tarafından geçersiz kılınır. Belirli bir durumda

kusurlu kural bootstrap.css dosyada .navbar-nav > li > a olduğunu.

Kuralınızı .navbar-nav .navBarItem{padding-left:0} olarak ayarlamak onu düzeltir.

kaynak

2016-04-11 19:21:49

Bu, nasıl çözüleceğimi göstermese de, nedenini anlamaya yardımcı olur. Fakat bir sınıfın daha güçlü olan tanımlaması o zaman bir özniteliğin tanımlanması değildir, çünkü başka bir sınıf sınıf özniteliği yok mu? – JRsz

, bir özniteliğin tanımı değil. Nitelik özniteliği, css dosyanızda, [href] {color: red;} 'gibi bir niteliği hedefleyen bir seçicinin oluşturulmasını ifade eder; bu, tüm öğeleri bir href özniteliğine göre biçimlendirir. Bir öğeyi stil oluşturmak için gerçek "stil" özniteliğini satır içi (* html *) kullanarak kullanmak en yüksek düzendir. Kendinizi geçersiz kılan ve daha spesifik bir kural yaratan kuralı bulmanız gerekir. –

@JRsz, vakanız için daha özel bir kural eklemek için güncellemeyi yanıtladı. –

Sorununuzun dosyanızın konumuyla ilgili olduğunu düşünüyorum. Sen Örneğin, html dosyası ile aynı dizinde olması için css dizinini gerekir

<link rel="stylesheet" href="css/design.css" />

css/design.css dosyayı bağlantılı:

public.html
- index.html // html sayfası
- css
- - design.css

bu sorun değilse, dosyalarınız ne yani bu can yapısı nasıl beni lütfen yorum sorun olarak dışlanmak.

kaynak

2016-04-11 19:26:50 Webeng

Tam olarak böyle. "Css" dizini, index.html ile aynı dir. Bu sorunu çözmek için "güzel" bir yol olmamasına rağmen, özgüllük ile bir şeyler yapmak zorunda olduğunu düşünüyorum. – JRsz

Outsourcing css özelliği çalışmıyor

cevap

İlgili konular