cssのクラス指定の仕方でなぜ指定が効かないのか理由が知りたい。

Question

  <footer>
    <div class="footer-inner">
      <div class="info">
        <div class="info1">
          <p> <span class="left">商品名：</span>
            <span class="right">彩華9（Saika nine）</span></p>

          <p> <span class="left left2">価 格：</span>
            <span class="right">25,000円（税別）</span></p>

          <p> <span class="left">内容量：</span>
            <span class="right">30g</span></p>

        </div>
</footer>

footer .info {
    display: flex
  }

footer .info1 {
    flex: 0 0 30%;

  }

footer .info2 {
    flex: 0 0 60%
  }
  footer  .left{margin: 0}

footer .info1 .left{margin: 0}にすると効きました。この違いはなんなのでしょうか。なぜfooter .leftという指定では効かなかったのでしょうか。

Comments

[maisumakun]

指定しているCSSはこれだけですか？

[m.ts10806]

「効く」「効かない」は具体的にどこの話でしょうか。
また目指すゴール、レイアウトなどを提示されないと的確なアドバイスにはならないと思います

Answer 1

marginのイニシャル値は0なので、このコードの範囲だけなら効かないも何もなく、元々0です。

おそらく、ここに書かれていない他のスタイルが存在して、詳細度の関係でそちらのルールが優先されている、ということかと思います。

詳細度は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。

詳細度 - CSS: カスケーディングスタイルシート | MDN