レスポンシブデザインscssのdisplayプロパティー

Question

前提・実現したいこと

display: none;で消した要素を、display: block;で再表示させる。

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

PC-firstで、サイトを作っています。
PC用の画面で消した要素を、タブレット用の画面で、レスポンシブデザインで、再表示させようと、display: block;を指定しても、再表示されません。

### 該当のソースコード
/*HTML*/
<header>
    <div class="container">
      <h1><a href="#">XeoryExtension</a></h1>
      <nav>
        <ul>
          <li><a href="#">記事ページサンプル</a></li>
          <li><a href="#">Extentionをダウンロード</a></li>
        </ul>
        <div class="main-icon">
          <span class="fas fa-align-justify"></span>
        </div>
        <div class="main-bar">
          <h2>ブログコンテンツ</h2>
          <p><span class="fas fa-angle-right"></span></p>
          <p><span class="fas fa-angle-right"></span></p>
        </div>
      </nav>
    </div>
    </header>
/*PC*/
header {
    background: $green;
    .container{
        margin: 0 auto;
        max-width: 1195px;
        h1 {
            font-size: 24px;
            line-height: 92px;
            width: 172px;
            display: inline-block;
            a {
                color: white;
                &:hover {text-decoration: underline;}
            }
        }
        nav {
            float: right;
            .main-icon {display: none;}
            .main-bar {display: none;}
        }
        li {
            display: inline-block;
            line-height: 92px;
            margin-right: 25px;
            &:hover {background: #58BCA8;}
            a {
                color: white;
                display: inline-block;
            }
        }
    }
}
@import '_tablet.scss';

/*_tablet.scss*/
@media (max-width: 991px) {
  header {
    nav {
      ul {display: none;}
      .main-icon {display: block;}
      .main-bar {display: block;}
    }
    
  }
}
}

/*コンパイル後*/

header {
  background: #48B39D;
}

header .container {
  margin: 0 auto;
  max-width: 1195px;
}

header .container h1 {
  font-size: 24px;
  line-height: 92px;
  width: 172px;
  display: inline-block;
}

header .container h1 a {
  color: white;
}

header .container h1 a:hover {
  text-decoration: underline;
}

header .container nav {
  float: right;
}

header .container li {
  display: inline-block;
  line-height: 92px;
  margin-right: 25px;
}

header .container li:hover {
  background: #58BCA8;
}

header .container li a {
  color: white;
  display: inline-block;
}

@media (max-width: 991px) {
  header nav ul {
    display: none;
  }
  header nav .main-icon {
    display: block;
  }
  header nav .main-bar {
    display: block;
  }
}

```ここに言語名を入力
HTML scss 

### 試したこと
tabletのコードは、@importを、使い別ファイルで、管理しています。
display:none;をコメントアウトし、menu-iconとmenu-barの、backgroundのカラーをつけてみたりしましたが、正常に色が変わりました。しかし、display:balok;が、なぜか効きません。
詳細度も、クラス同士で、同じはずなのに、なぜ上書きされないのでしょうか？

Answer 1

詳細度の違いです。

メディアクエリのない方はheader .container nav .main-iconとなっているのに対して、メディアクエリ内ではheader nav .main-iconとセレクタが少ないため、メディアクエリが適用されようがされまいが、メディアクエリ外のCSSが優先して適用されてしまいます。

Comments

[Patao150205]

ありがとうございます！解決できました。足した合計で、詳細度が、決まるのを思い出しました。