gpt4 book ai didi

css - Bootstrap CSS 没有被覆盖?

转载 作者:太空宇宙 更新时间:2023-11-04 13:35:02 28 4
gpt4 key购买 nike

我在我的网站上使用 Bootstrap CSS 并在 <head> 中加载元素。在我加载 boostrap 的正下方,我有一个 <style>我试图从 Bootstrap 覆盖一些 CSS 的元素,但当我查看 Chrome 开发检查器时它并没有覆盖它。我认为 element 中的元素应该级联之前的元素?

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Women's Transit</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />

<style type="text/css">
/* Global elements */
input {
height:30px;
padding:8px;
}
</style>
</head>

最佳答案

您可能需要 !important

input {
height: 30px !important;
padding: 8px !important;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

重要:

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.

所以 !important 是覆盖样式的最简单方法,因为它比其他样式更“具体”。请注意,覆盖样式是非常糟糕的做法,尤其是 !important

实际解决方案:不要覆盖样式。

关于css - Bootstrap CSS 没有被覆盖?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23100521/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com