HTML、CSS初心者です。勉強中のテキスト内に以下のようなサンプルコードがあるのですが、なぜ「<p class="card__btn"><span>詳しく</span>」のような書き方をするのか理解できなかったため、質問させていただきました。<p>のみでは、cssでレイアウトをする際に不都合なのでしょうか。
初歩的な質問で申し訳ございませんが、アドバイスいただけますと幸いです。よろしくお願いいたします。
HTML
1<section class="cardList__item"> 2 <a href="#" class="card"> 3 <h3 class="card__ttl">サービス名</h3> 4 <p class="card__txt">この文章はダミーです。</p> 5 <p class="card__btn"><span>詳しく</span></p> 6 </a> 7 </section>
CSS
1.card { 2 display: block; 3 color: inherit; 4 text-decoration: none; 5} 6.card:hover { 7 color: inherit; 8} 9.card__ttl { 10 margin-bottom: 15px; 11 padding-bottom: 5px; 12 border-bottom: 2px solid #509422; 13 font-size: 1.2em; 14} 15.card__txt { 16 line-height: 1.7; 17} 18.card__btn { 19 text-align: right; 20} 21.card__btn > span { 22 display: inline-block; 23 padding: 5px 15px; 24 border: 1px solid; 25 font-size: 0.85em; 26 transition: background-color 0.3s, color 0.3s; 27} 28.card:hover .card__btn > span { 29 background: #509422; 30 color: #fff; 31}
回答2件