我有一个用作链接的自举卡.
试图用< a>包裹它更改卡的所有样式.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<a href="">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</a>
我应该如何包装卡片以保持其外观并将其用作链接？
解决方法
因为< a>标签具有来自用户代理浏览器的默认蓝色.尝试在链接中添加一个类并设置颜色：继承到该类
a.custom-card,a.custom-card:hover {
color: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<a href="" class="custom-card">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</a>
