爲什麼嵌套在ID中的class元素不會覆蓋其他css文件中的類元素？

我有一個問題。爲什麼style.css中的顏色定義不會覆蓋嵌套在ID中的這個：#main-nav？爲什麼嵌套在ID中的class元素不會覆蓋其他css文件中的類元素？

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 I更改代碼如下：

的style.css

.navbar-default { 
color: white; 
}

顏色參數已經改變。有人能解釋爲什麼帶ID的第一種方式不起作用嗎？

來源

2016-05-12 minimum

這是因爲樣式優先於CSS的，你可以在這裏有更多的細節： http://vanseodesign.com/css/css-specificity -inheritance-cascaade/ –

不，這是因爲選擇器甚至不匹配。 – BoltClock

你在你的style.css文件中使用descendant selector，這意味着你的CSS正在尋找與ID #main-nav元素的後代，有一個班的.navbar-default當你真正想選擇與ID #main-nav的元素也有一類.navbar-default所以，解決您的問題，只需刪除後代選擇器（即空間），讓您：

#main-nav.navbar-default

你也可能需要閱讀了上CSS specificity。

來源

2016-05-12 10:28:45 Shaggy

替換此行：

#main-nav .navbar-default

有了這個：

#main-nav.navbar-default

來源

2016-05-12 10:18:25

主要-NAV ID #main-nav是導航欄，默認類.navbar-default

在相同的元素所以選擇它與CSS，你可以使用

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

Fiddle

來源

2016-05-12 10:28:35

好的，所以這裏的主要問題是您正在使用的選擇器。

你選擇

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

，這意味着這臺白色的上課元素.navbar默認，也是父＃主導航

但在你的情況.navbar-default本身的ID爲＃main-nav不是它的父母。這就是爲什麼你的選擇器沒有按你的要求工作。

你需要改變你的代碼如下工作

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

來源

2016-05-12 10:36:38

爲什麼嵌套在ID中的class元素不會覆蓋其他css文件中的類元素？

回答

相關問題