「CSS」スタイル継承のサンプル

2021年7月28日

1.CSSコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cftA {
background-color: blue;
}
</style>
<style> .cftA { background-color: blue; } </style>
<style>
  .cftA {
    background-color: blue;
  }
</style>

2.htmlコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="ma">
AA 111
<div class="cftA">
BB 2222
<div class="cftB">CC 333</div>
</div>
</div>
<div class="ma"> AA 111 <div class="cftA"> BB 2222 <div class="cftB">CC 333</div> </div> </div>
<div class="ma">
  AA 111
  <div class="cftA">
    BB 2222
    <div class="cftB">CC 333</div>
  </div>
</div>

説明:クラスcftBの文字の色が親クラス要素から値が継承される

CSS

Posted by arkgame