アウトソーシングのCSSプロパティが機能しません

私はすべての研究と試しても解決できない単純な問題があります。私はCSSのプロパティをファイルに移動したい。拳の下のコードスニペット<li>要素が正しく表示されていません。アウトソーシングのCSSプロパティが機能しません

私のCSSファイル：

.navBarItem 
{ 
    padding-left: 0px; 
}

私のHTMLファイル：

<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>

私は私がそのCSSファイルをインポートする場合は特に、別のファイルに指定されたプロパティを置くことは違いはありませんだろうと思いました非常に最後。

出典

2016-04-11 JRsz

それが動作するはずですが、それはもっと複雑です - [この質問]（http://stackoverflow.com/questions/2876575/css-rule-priorities）と[MDN：Specificity]（https://developer.mozilla.org/en/docs/Web/CSS/）を参照してください。特異性）。あなたのブラウザのコンソールのHTMLタブをチェックして、どのルールがあなたのものよりも優先されているかを確認してください（または '！important'を追加してください）。 – Kenney

あなたのスタイルルールは 'theme.less'と 'bootstrap.css'によって無効になります。あなたの新しい属性が最も重要で考えられているようにするため

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

：あなたの問題への最も簡単な修正はにあなたのCSSを変更しています。

あなたは右の最初の「アクション」リンクをクリックして、要素（クローム）を点検場合は、独自のスタイルを上書きします正確なCSSの属性は、このであることがわかります：自分のルールのため、今

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

最も重要であると、あなたが最初の属性から継承を維持し、交換してください「」独自のクラスで、そのようにする必要があります。

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

}

出典

2016-04-11 19:30:39 arch1ve

これは問題を解決しますが、重要ではない方法を知っていますか？ – JRsz

あなたのニーズに合わせて元の回答を編集しました。問題は、ルールの定義がより具体的（すなわち、≧li> a）であるほど、より単純なルール（つまり.navBarItem）より重要度が高いことです。 – arch1ve

これはいいです、完璧に動作します、ありがとう。「より良い」方法があるのか、それとも同等の効率がありますか？ – JRsz

最初のケース（はクラスを使用しています）では、使用している実際のセレクターの特異性でプレイします。 .navBarItemは単一のクラスなので、より具体的なもので上書きされます。

しかし、あなたは（ !importantを使用してほか）最高の特異性を有しstyle属性（インラインスタイリング）を使用する第2のケースで

だから、問題は、ルールを外部ファイルにあることではなく、それはより高い特異性を持つ他のいくつかのルールによって上書きされるということです。あなたの特定のケースで

問題のルールは、bootstrap.cssファイルで.navbar-nav > li > aです。

ルールを.navbar-nav .navBarItem{padding-left:0}に設定すると修正されます。

出典

2016-04-11 19:21:49

これは私にそれを解決する方法を示していませんが、原因を理解するのに役立ちます。しかし、クラスの識別は、属性の識別より強力ではありません。他のクラスの属性や属性がないためです。 – JRsz

は、属性の識別ではありません。属性の特異性は 'href'属性ですべての要素をスタイルする' [href] {color：red;} 'のような属性を対象とするCSSファイルのセレクタを作成することを指します。実際の 'style'属性inline（* html *の中で）を使って要素をスタイルすることは最高の順序です。あなたはあなた自身を上書きするルールを見つけ、より具体的なルールを作成する必要があります。 –

@JRszあなたのケースに対してより具体的なルールを含めるように更新された回答。 –

あなたの問題は、ファイルの場所と関係があります。あなたは、たとえば、HTMLファイルと同じディレクトリにあるとCSSディレクトリが必要になり

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

CSS/design.cssにファイルをリンクさ：

public.html
- index.htmlを//あなたのhtmlページ
- CSS
- - design.css

これが問題でない場合は、あなたのファイルはそう何、これが可能な構造であるかに私をコメントしてください問題として排除される。

出典

2016-04-11 19:26:50 Webeng

それはまさにその方法です。ディレクトリ "css"は、index.htmlと同じディレクトリにあります。私はこの問題を解決するための「良い」方法はないが、それが具体性を持って何かをしなければならないと思う。 – JRsz

アウトソーシングのCSSプロパティが機能しません

答えて

関連する問題