无法应用 CSS，可能是因为 Bootstrap
发布于2025-01-19 22:43 阅读(258) 评论(0) 点赞(28) 收藏(5)
StackOverflow 上有很多问题问到这个问题，但我尝试过的所有解决方案（例如，在 Bootstrap 链接下方粘贴个人样式表、使用 bootstrap-override id 为我的选择器增加更多权重、强制选择器）都不起作用。我验证了我的 CSS，因此没有多余的分号或类似的东西会干扰它。而且，奇怪的是，!important 属性不会覆盖样式。
我正在用 Django 建立一个网站。我的所有页面都是从我的“base_generic.html”文件扩展而来的，所有内容都链接到一个样式表。当我在样式表中进行任何更改时，它都不会反映在 html 页面上。即使是与 Bootstrap 无关的最基本的更改（例如更改 HTML 选择器的字体大小或颜色），也是如此。
所以，我认为我的 base-generic.html 和样式表之间的链接可能存在问题。但是，注释掉链接显然会对页面的外观产生巨大影响，因此样式表肯定链接正确。我不知道为什么我的 CSS 没有反映在页面上。我不认为这是 Bootstrap 的问题，因为将 p 选择器中的所有文本都设为绿色应该与 Bootstrap 无关，但我不排除这种可能。有人知道发生了什么吗？
编辑：我没有添加代码，因为代码不多，但是我所拥有的如下：
我的 html 页面从 base-generic.html 扩展而来：
{% extends "base_generic.html" %}
{% block content %}
<h1><strong>{{room_name}}</strong></h1>
{% if room_name.status == 'g' %} <p>{{room_name}}'s status is <strong id="green-text">green</strong>.</p>{%elif room_name.status == 'y' %}<p>{{room_name}}'s status is <strong id="yellow-text">yellow</strong>.</p>{% elif room_name.status == 'r' %} <p>{{room_name}}'s status is <strong id="red-text">red</strong>.</p>{% endif %}
<p>{{room_name.details}}</p>
{% endblock content %}我的 CSS：
nav { background-color: #07407b; }
#nav-title { color: white; }
body {
font-family: 'Varela Round', sans-serif;
}
.container { padding-top: 5.5em; }
.card { padding-top: 5.5em; }
h1 {
padding-bottom: 1em;
padding-top: 1em;
font-size: 1.5em;
text-align: center;
}
#last-row { padding-bottom: 5.5em; }
.navbar-brand { font-size: 1.75em; }
h2 {
font-size: 1.2em;
}
#green-text {
color: green;
}解决方案
我认为这不是 Bootstrap 的问题。也许是你的浏览器（Service Workers SW）。右键单击检查，进入你的 SW 并选择重新加载时更新
，或者只要你更改 CSS 文件，即可通过以下方式重新加载页面：cmd+shift+R / ctr+shift+R
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/538975/da06d874056a9611fc90/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力