IDにネストされたclass要素が他のCSSファイルのclass要素を上書きしないのはなぜですか？

私は問題があります。 style.cssの色定義が、IDにネストされたこの色を上書きしないのはなぜですか？＃main-nav？IDにネストされたclass要素が他のCSSファイルのclass要素を上書きしないのはなぜですか？

HTML

<head> 
<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 
</head> 
<body> 
<div id="main-nav" class="navbar-default" role="banner"> 
content 
</div> 
</body>

bootstrap.css

.navbar-default { 
color: black; 
}

のstyle.css

#main-nav .navbar-default { 
color: white; 
}

面白い私は何ですかF私は以下のようにコードを変更：

のstyle.css

.navbar-default { 
color: white; 
}

色のパラメータが変更されました。誰かがなぜIDの最初の方法がうまくいかないのか説明できますか？これにより

#main-nav .navbar-default

：

#main-nav.navbar-default

出典

2016-05-12 minimum

それが原因CSSでスタイルの優先順位のだが動作するように、次のようにコードを変更する必要があり、あなたはここでは詳細を持つことができます。をhttp://vanseodesign.com/css/css-specificity -inheritance-cascaade/ –

いいえ、セレクタが最初に一致していないからです。 – BoltClock

また、あなたの問題を解決するために、その.navbar-defaultのクラスを持っているID #main-navを持つ要素がある、単にあなたに与えて、（すなわち、スペース）子孫セレクタを削除します。

#main-nav.navbar-default

ます。また、最大で読みたいかもしれませんCSS specificity。

出典

2016-05-12 10:28:45 Shaggy

この行を置き換えそれはCSSで、あなたは使用することができます

#main-nav.navbar-default { 
    // your code 
}

あなたが本当に選択しようとしているものをするとき、あなたのCSSは .navbar-defaultのクラスを持っているID #main-navを持つ要素の子孫を探していることを意味し、あなたのstyle.cssファイルに descendant selectorを使用している

Fiddle

出典

2016-05-12 10:18:25

ID #main-navは、ナビゲーションバー-defaultクラス.navbar-default

と同じ要素上にあるメイン-NAVはそう選択する

出典

2016-05-12 10:28:35

さて、ここでの主な問題は、使用しているセレクタです。それは、クラス.navbarデフォルトと、親＃メイン-NAV

しかし、あなたの場合を有する素子用のカラー白を設定します意味

あなたのセレクタ

#main-nav .navbar-default { 
color: white; 
}

.navbar-defaultそれ自体はidが＃main-navで、親ではありません。あなたのセレクターがあなたの必要に応じて機能していない理由です。

あなたは

#main-nav.navbar-default { 
    color: white; 
    }

出典

2016-05-12 10:36:38

IDにネストされたclass要素が他のCSSファイルのclass要素を上書きしないのはなぜですか？

答えて

関連する問題