我有下面的boostrap卡，我想通过使用一些css来对它们进行样式设置(覆盖现有样式(。
卡片代码
<div class="card" style="width: 18rem;">
<img src="https://cdn.ymaws.com/cilip.site-ym.com/resource/resmgr/cilip/information_professional_and_news/non_infopro_news/2020_03_coronavirus/coronavirus_header.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
我试图在css中添加的内容(在head标签中(
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.card{
body {
color: blue;
}
h1 {
color: green;
}
p{
color: red;
}
}
</style>
</head>
在此位中
<style>
.card{
我试图参考引导类卡片，并改变它的风格。
有人能指出我做错了什么吗？请给初学者一个解决方案和充分的解释。
目标：目标是使用我提供的css来设计卡片的样式。例如，卡片的p和h1标签将按照我指定的样式设置。在这种情况下，卡片中的标题为绿色，段落为红色，卡片正文为蓝色。由于某些原因，应用于头部的样式不适用于卡片。
我尝试过的：
我也试着按照的建议分别做每一个
<style>
.card-body{background-color: blue;}
.card-body{h1: green;}
.card-body{p: red;}
</style>
在上面的例子中，第一种样式(蓝色(有效，但它没有改变h1和p。
您必须单独对它们进行编码，例如.card-body{background-color: blue;}
要覆盖现有样式，需要使用！重要
例如
h1 {
color: green !important;
}
您必须将css代码更改为：
<style>
.card-body { color: blue; }
.card-body h1 { color: green; }
.card-body p { color: red; }
</style>