下载了一个免费的 bootstrap 模板,并try 使用自定义的css文件更改样式,但模板中的css没有更改它. try 更改一些背景 colored颜色 和文本 colored颜色 没有什么效果,为什么这是不起作用的,可以做什么,模板阻止,你不能做更改?

这只是示例的一小部分,css和html太大了,无法上传

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/custom.css" />
</head>
<body>

<div class="container">
<div class="col-lg-4 my-3">
<div class="card hover-top">
<div class="card-body">
<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1">
change style text
</span>
<div class="d-flex align-items-end pt-4">
<div class="display-7 m-0 font-w-700 lh-1">Display Text</div>
</div>
</div>
</div>
</div>
</div>

/** style.css **/
/********** Template CSS **********/
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #ffffff;
  background-clip: border-box;
  border: 0 solid #eff2f7;
  border-radius: 0.3rem; }
  .card > hr {
    margin-right: 0;
    margin-left: 0; }
  .card > .list-group {
    border-top: inherit;
    border-bottom: inherit; }
    .card > .list-group:first-child {
      border-top-width: 0;
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem; }
    .card > .list-group:last-child {
      border-bottom-width: 0;
      border-bottom-right-radius: 0.3rem;
      border-bottom-left-radius: 0.3rem; }
  .card > .card-header + .list-group,
  .card > .list-group + .card-footer {
    border-top: 0; }

.card-body {
  flex: 1 1 auto;
  padding: 1.75rem 1.75rem; }

.card-title {
  margin-bottom: 0.5rem; }

.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0; }

.card-text:last-child {
  margin-bottom: 0; }

.card-link + .card-link {
  margin-left: 1.75rem; }

.card-header {
  padding: 0.875rem 1.75rem;
  margin-bottom: 0;
  background-color: transparent;
  border-bottom: 0 solid #eff2f7; }
  .card-header:first-child {
    border-radius: 0.3rem 0.3rem 0 0; }

.card-footer {
  padding: 0.875rem 1.75rem;
  background-color: transparent;
  border-top: 0 solid #eff2f7; }
  .card-footer:last-child {
    border-radius: 0 0 0.3rem 0.3rem; }


/** custom.css try this **/
.newtextstyle{
color: red;
font-size:1.5em;
}

/** custom.css and this **/
.newtextstyle{
color: red !important;
font-size:1.5em !important;
}

/* try to change this with no effect */
<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1 newtextstyle">
change style text
</span>

推荐答案

在这个例子中,不可能弄清楚为什么您的更改不起作用.一些模板的样式有时通过js加载.

加载css的优先级为

Css文件文件

<link rel="stylesheet" href="assets/css/custom.css" />

在您的html中

<script>
.newtextstyle{
color: red !important;
font-size:1.5em !important;
}
</script>

<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1 newtextstyle">
change style text
</span>

在标记内

<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1" style="color: red;
font-size:1.5em;">
change style text
</span>

the highest priority is 在标记内 and overwrites all changes try one of this an see what works for you

Html相关问答推荐

如何将背景图像放置在窗口的最顶部?

网格容器中的定心元件

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表?

在浮动元素旁边垂直居中

CSS自定义特性中的URL是否可以相对于定义的CSS文件?

assets资源 净值元素不会扩展到涵盖子项

十进制数字不适用于格网项目的格网布局线放置中使用的SPAN关键字

阴影部分内部的ionic Select 元素

如何在悬停时更改同级元素 CSS

添加带有悬停动画的喜欢图标

如何根据剪辑路径边缘设置文本边距?

我在桌面版 html css 代码上给出了位置 margin-left margin-top 标签,如何将其删除到手机上以使其响应?

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ?

pandas `to_html()` - 如何只使特定的行有边框

不同屏幕尺寸的显示问题

在 jinja 模板内的 html 表中嵌套 For 循环

如何在没有 JS 的情况下创建带搜索的 Select 菜单

绝对定位的 div 与另一个静态定位的 div 的边距顶部一起移动

如何自定义具有白色透明背景的光标图像?