0

我有以下 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。

4

3 回答 3

1

您必须单独编码它们，例如.card-body{background-color: blue;}

于 2021-01-06T16:09:45.967 回答
1

要覆盖现有样式，您需要使用!important

例如

h1 {
  color: green !important;
}
于 2021-01-06T16:15:29.613 回答
0

您必须将您的 css 代码更改为：

<style>
.card-body { color: blue; }
.card-body h1 { color: green; }
.card-body p { color: red; }  
</style>
于 2021-01-06T16:54:35.533 回答