cssでcolorが反映されない

Question

ヘッダーメニューの文字を白にしたいのですが適用されません。（CSSの????‍♂️のとこ）
chromeにて検証を行なったら
_reboot.scssというファイル？のなかに下記のような記述があるために色が白に変更できないようなんですが、_reboot.scssというファイルは作った覚えがなく、変えようにもどう変更したら良いのかわかりません。どうすれば書き換えられるかわかる方がいたら教えていただきたいです。

●_reboot.scss
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}

●html

<header>

<div class="menu">
  <ul class="nav">
    <li><a href="#home" class="btn2">Home</a></li>
    <li><a href="#company" class="btn4"></a></li>
    <li><a href="#member" class="btn4">メンバー</a></li>
    <li><a href="#portfolio" class="btn4">ポートフォリオ</a></li>
    <li><a href="#skills" class="btn4">スキル・会社概要</a></li>
    <li><a href="#contact" class="btn4">お問い合わせ</a></li>    
  </ul>
</div>

</header>

●CSS

????‍♂️ header .menu .nav{
color: #f1f1f1 !important ;

      }

header{
position: fixed;
z-index: 10;
height: 64px;
/* position: absolute; */
top: 0px;
background-color: rgb(22, 160, 179);
width: 100%;
text-align: center;
z-index: 2;
box-shadow: 0px 0px 10px 0px rgb(21, 26, 25);

}

ul {
overflow:hidden;
list-style:none;
margin: 0 auto;
z-index: 20;
}
ul li {
display: inline-block;
padding: 26px 10px 20px 10px;
}
.btn4{
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
}

    .btn4::before {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0px;
      width: 100%;
      height: 2px;
      background: #f1f1f1;
      display: block;
      -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
      transform-origin: right top;
      -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      transform: scale(0, 1);
      -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
      transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
    }
    .btn:hover::before{
      -webkit-transform-origin:left top;
      -ms-transform-origin: left top;
      transform-origin:left top;  
      -webkit-transform:scale(1,1);
      -ms-transform:scale(1,1);
      transform:scale(1,1);
    }
    
    .btn2{
      text-transform: uppercase;
      text-align: center;
      position: relative;
      text-decoration: none;
      display:inline-block;
      border-bottom: 2px solid #1fa7ac;
    }

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。

Answer 1

.navの中身は<a>になっていますが、<a>のリンクには別途でスタイルがかかっているので、.navから継承した分より優先されます。!importantは継承には効果がありません。

header .menu .nav aへ直接スタイルをかけてください。

Comments

[kan1]

回答いただき有難うございます、解決いたしました。

Answer 2

header .menu .nav li a{
    color: #f1f1f1 !important ;
}

こうじゃないですか？

Comments

[kan1]

アドバイスくださり有難うございました、ビジ解決することができました、有難うございます