Bootstrapのnav-linkの文字色を変える時のセクレタの記述

前提・実現したいこと

cssでnav-linkの文字色をwhiteにするとき、.navbar-dark .navbar-nav .nav-link{color:white;}のようにnav-linkの親要素を記述しないとwhiteになりません。なぜ、.nav-link{color:white;}だけでは、適用されないのでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<body data-spy="scroll" data-target="#navbarResponsive">
2	<!-- Start Home Section  -->
3	<div id="home">
4
5
6	</div>
7	<!-- Navgation -->
8	<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
9		<a href="#" class="navbar-brand">
10			<img src="img/nuno.png" alt="">
11		</a>
12		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
13			<span class="navbar-toggler-icon"></span>
14		</button>
15
16		<div class="collapse navbar-collapse" id="navbarResponsive">
17			<ul class="navbar-nav ml-auto">
18				<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
19				<li class="nav-item"><a class="nav-link" href="#course">Course</a></li>
20				<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
21				<li class="nav-item"><a class="nav-link" href="#resouces">Resouces</a></li>
22				<li class="nav-item"><a class="nav-link" href="#clients">Clients</a></li>
23				<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
24			</ul>
25		</div>
26	</nav>
27
28以下CSSの記述です。
29.navbar-dark .navbar-nav .nav-link{
30  color:white;
31  padding-top:0.8rem;
32}
33

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

詳しくないのですが、bootstrapで.navbar-dark .navbar-nav .nav-linkというセレクタで指定されているので、
.nav-linkだけだと優先順位(specificity)で負けるからです。
クラスセレクタの数が多い方が優先されます(ID指定の方がそれよりも優先)。

詳細はCSSの仕様を見てください。
https://www.w3.org/TR/selectors-3/#specificity
(2019/11/15現在draft https://www.w3.org/TR/selectors-4/#specificity-rules)

投稿2019/11/15 00:01