CSS样式如何修改
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS样式如何修改相关的知识，希望对你有一定的参考价值。
我想要修改一个CSS样式，边框呀什么的都要修改 ，就像图中一样的，请问应该如何修改。q364801331
1、引jQuery，然后定义元素的style样式，根据自己的元素来定义，这里随性定义div的style样式。
2、接着我们看样式所带来的效果，接着开始设置点击按钮会产生变化颜色等交互效果。
3、首先，自然是指定好触发变化颜色的事件，可以是经过触发等，这里我就点击即可触发颜色变化。
4、用css()便可以覆盖原来元素的样式了哦。
5、如果是修改元素单个样式，要用逗号隔开，不可以使用冒号哦。
6、这样就可以得到交互效果了，但是这只是一个样式的效果发生了变化，
7、可以用大括号裹住多个样式，逗号分隔样式，然后样式值用冒号
8、最后样式交互就大功告成了，多个样式就会被修改了
如何覆盖 Bootstrap CSS 样式？
【中文标题】如何覆盖 Bootstrap CSS 样式？【英文标题】：How can I override Bootstrap CSS styles? 【发布时间】：2014-01-10 08:32:53 【问题描述】：我需要修改bootstrap.css 以适应我的网站。我觉得创建一个单独的custom.css 文件而不是直接修改bootstrap.css 会更好，一个原因是如果bootstrap.css 得到更新，我会尝试重新包含我的所有修改。我会为这些样式牺牲一些加载时间，但对于我要覆盖的少数样式来说，这可以忽略不计。
我如何覆盖bootstrap.css 以便删除锚/类的样式？例如，如果我想删除 legend 的所有样式规则：
legend
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
我可以删除 bootstrap.css 中的所有内容，但如果我对覆盖 CSS 的最佳实践的理解是正确的，我应该怎么做？
明确地说，我想删除所有这些图例样式并使用父级的 CSS 值。那么结合 Pranav 的回答，我会做以下事情吗？
legend
display: inherit !important;
width: inherit !important;
padding: inherit !important;
margin-bottom: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
border: inherit !important;
border-bottom: inherit !important;
（我希望有一种方法可以执行以下操作：）
legend
clear: all;
【问题讨论】：
【参考方案1】：将您的 custom.css 文件链接为 bootstrap.css 下方的最后一个条目。 Custom.css 样式定义将覆盖 bootstrap.css
HTML
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
复制 custom.css 中图例的所有样式定义并在其中进行更改（如 margin-bottom:5px; -- 这将覆盖 margin-bottom:20px; ）
【讨论】：
是的，我已经这样做了。抱歉，我的问题不清楚。我的问题是问如何在 custom.css 中覆盖 bootstrap.min.css 中的样式。 如果我也使用 bootstrap-theme.min.css 怎么办？ 为我工作，即使使用 min css【参考方案2】：它不会对加载时间产生太大影响，因为您正在覆盖基本样式表的某些部分。
以下是我个人遵循的一些最佳实践：
-
始终在基本 CSS 文件之后加载自定义 CSS（不响应）。
尽可能避免使用
!important。这可以覆盖基本 CSS 文件中的一些重要样式。
如果您不想丢失媒体查询，请始终在 custom.css 之后加载 bootstrap-responsive.css。 - 必须遵循
希望修改所需的属性（不是全部）。
【讨论】：
既然bootstrap-responsive.css 不再存在，这仍然成立，还是不再相关？【参考方案3】：
在你的 html 的 head 部分中，将你的 custom.css 放在 bootstrap.css 下面。
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
然后在 custom.css 中，您必须对要覆盖的元素使用完全相同的选择器。在 legend 的情况下，它只会在您的 custom.css 中保留 legend，因为引导程序没有任何更具体的选择器。
legend
display: inline;
width: auto;
padding: 0;
margin: 0;
font-size: medium;
line-height: normal;
color: #000000;
border: 0;
border-bottom: none;
但对于 h1 而言，您必须处理更具体的选择器，例如 .jumbotron h1，因为
h1
line-height: 2;
color: #f00;
不会覆盖
.jumbotron h1,
.jumbotron .h1
line-height: 1;
color: inherit;
这是对 CSS 选择器的特殊性的有用解释，您需要了解它才能准确了解哪些样式规则将应用于元素。 http://css-tricks.com/specifics-on-css-specificity/
其他一切都只是复制/粘贴和编辑样式的问题。
【讨论】：
【参考方案4】：如果您打算进行任何相当大的更改，最好直接在引导程序本身中进行更改并重新构建它。然后，您可以减少加载的数据量。
有关构建指南，请参阅Bootstrap on GitHub。
【讨论】：
根据所需定制的程度，这可能是最简单的选项。例如，更改任何主题颜色都需要大量覆盖，我宁愿选择模板更改和自定义构建。 @alex Bump 来源和重建？ 恕我直言 - 我个人的规则是永远不要修改 CSS、JS 或任何其他库中的源文件 - 在当今世界应该总是有一个优雅的解决方法，否则你会在更新源时遇到问题。 【参考方案5】：使用!important 不是一个好选择，因为您将来很可能希望覆盖自己的样式。这给我们留下了 CSS 优先级。
基本上，每个选择器都有自己的数字“权重”：
ID 100 分 类和伪类 10 分 标签选择器和伪元素1分 注意：如果元素具有内联样式that automatically wins（1000 分）在两种选择器样式中，浏览器总是会选择权重更大的一种。样式表的顺序只有在优先级相等时才重要——这就是为什么要覆盖 Bootstrap 并不容易。
您的选择是检查 Bootstrap 源，找出某些特定样式是如何定义的，然后复制该选择器，以便您的元素具有相同的优先级。但是在这个过程中我们有点失去了所有 Bootstrap 的甜头。
解决此问题的最简单方法是将额外的任意 ID 分配给页面上的某个根元素，如下所示：<body id="bootstrap-overrides">
这样，您可以在任何 CSS 选择器前面加上您的 ID，立即为元素添加 100 点权重，并覆盖 Bootstrap 定义：
/* Example selector defined in Bootstrap */
.jumbotron h1 /* 10+1=11 priority scores */
line-height: 1;
color: inherit;
/* Your initial take at styling */
h1 /* 1 priority score, not enough to override Bootstrap jumbotron definition */
line-height: 1;
color: inherit;
/* New way of prioritization */
#bootstrap-overrides h1 /* 100+1=101 priority score, yay! */
line-height: 1;
color: inherit;
【讨论】：
既然ID只能使用一次，为什么不把#bootstrap-overrides做成一个类呢？
@chharvey：因为你最终不得不计算得更好。如果它是本例中的一个类，它将是 prio 11，如果 css 定义在 bootstrap.css 之后，那么我们就可以开始了。但是，这将非常接近并将其设置为可以大大提高 prio 时间的 id，我们不必担心计算 prio 和测试是否总是正确的。如果你想明确地覆盖默认值，使用 id 更容易。
刚刚度过了我的一天。我知道这一点，但仍然试图弄清楚为什么我的样式没有被解释。
你提到的点（100 代表 id，10 代表类/伪类，1 代表标签选择器/伪元素）是文字，还是你只是为这个例子编造了这些值？
您的解释很好，作为向 css 新手解释它的一种方式是有意义的，但具有误导性。您提到的正确名称是 css specificity，它定义了每个 css 选择器的“权重”。这里有一些关于它的更多细节：css-tricks.com/specifics-on-css-specificity/…【参考方案6】：
使用 jquery css 代替 css 。 . . jquery 的优先级高于 bootstrap css...
例如
$(document).ready(function()
$(".mnu").css("color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline");
);
instead of
.mnu
font-family:myfnt;
font-size:20px;
color:#006699;
【讨论】：
HTML应该用来提供结构，CSS应该用来提供样式，Javascript（包括jQuery）应该只用来提供交互性。使用 jQuery 覆盖样式与良好架构的原则背道而驰，并且会让任何试图在 6 个月后处理代码的人感到非常困惑。【参考方案7】：我发现（引导程序 4）将您自己的 CSS 放在 bootstrap.css 和 .js 后面是最好的解决方案。
找到您要更改的项目（检查元素）并使用完全相同的声明，然后它将覆盖。
我花了一点时间才弄明白。
【讨论】：
【参考方案8】：有点晚了，但我所做的是向根 div 添加了一个类，然后在我的自定义样式表中扩展了每个引导元素：
.overrides .list-group-item
border-radius: 0px;
.overrides .some-elements-from-bootstrap
/* styles here */
<div class="container-fluid overrides">
<div class="row">
<div class="col-sm-4" style="background-color: red">
<ul class="list-group">
<li class="list-group-item"><a href="#">Hey</a></li>
<li class="list-group-item"><a href="#">I was doing</a></li>
<li class="list-group-item"><a href="#">Just fine</a></li>
<li class="list-group-item"><a href="#">Until I met you</a></li>
<li class="list-group-item"><a href="#">I drink too much</a></li>
<li class="list-group-item"><a href="#">And that's an issue</a></li>
<li class="list-group-item"><a href="#">But I'm okay</a></li>
</ul>
</div>
<div class="col-sm-8" style="background-color: blue">
right
</div>
</div>
</div>
【讨论】：
body标签是否存在于div标签中？ @SubratoPatnaik 它不应该。 我们如何覆盖body元素的css？使用 id 而不是类选择器是一种好习惯吗？你能帮我解决这个问题吗？ @SubratoPatnaik 查看此问题的最高答案。以这种方式覆盖 CSS 规则的优先级低于 id。可能是？试试看。【参考方案9】：为图例提供 ID 并应用 css。就像将 id hello 添加到 legend() 一样，css 如下所示：
#legend legend
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
【讨论】：
【参考方案10】：2021 年更新 - Bootstrap 4 和 Bootstrap 5
覆盖 Bootstrap CSS 时要遵循 3 条规则。
-
在您的 CSS 规则（覆盖）之前导入/包含
bootstrap.css
使用比 Bootstrap CSS 选择器更多（或相等）的 CSS 特定性
如果任何规则被覆盖，请使用 !important 属性来强制执行您的规则。如果您遵循规则 1 和 2，则除非使用 Bootstrap utility classes which often contain !important as explained here，否则这不是必需的
是的，覆盖应该放在单独的styles.css（或custom.css）文件中，以便bootstrap.css 保持不变。这使得升级 Bootstrap 版本更容易，而不会影响覆盖。对styles.css 的引用在bootstrap.css 之后，以便覆盖工作。
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
只需在自定义 CSS 中添加所需的任何更改。例如：
legend
display: block;
width: inherit;
padding: 0;
margin-bottom: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
white-space: initial;
注意：在覆盖 CSS 中是not a good practice to use
!important，除非 您正在覆盖Bootstrap Utility classes 之一。 CSS specificity 总是适用于一个 CSS 类来覆盖另一个。只需确保您使用的 CSS 选择器与 bootstrap.css 相同或更具体
例如，考虑 Bootstrap 4 深色导航栏链接颜色。这是bootstrap.css...
.navbar-dark .navbar-nav .nav-link
color: rgba(255,255,255,.5);
因此，要覆盖导航栏链接颜色，您可以使用相同的选择器，或者更具体的选择器，例如：
#mynavbar .navbar-nav .nav-link
color: #ffcc00;
例如：https://codeply.com/p/FyQapHImHg
当 CSS 选择器相同时，最后一个优先，这就是为什么 styles.css 应该跟随 bootstrap.css。
【讨论】：
这似乎没什么新意；几个现有的答案讨论了将您的样式放在一个新的 CSS 文件中，该文件在 Bootstrap CSS 文件之后加载。 #mynavbar 是导航栏的 id :D 对于新手 @Zunair #mynavbar 是navbar 的id，是navbar-nav 的parent【参考方案11】：
要在引导程序中重置为 legend 定义的样式，您可以在您的 css 文件中执行以下操作：
legend
all: unset;
参考：https://css-tricks.com/almanac/properties/a/all/
CSS 中的 all 属性重置所有选定元素的 属性，但方向和 unicode-bidi 属性除外 控制文字方向。
可能的值为：initial、inherit & unset。
旁注：clear 属性与float (https://css-tricks.com/almanac/properties/c/clear/) 相关使用
【讨论】：
【参考方案12】：-
检查控制台上的目标按钮。
转到元素选项卡，然后将鼠标悬停在代码上并确保找到默认 ID
或引导程序使用的类。
使用jQuery/javascript调用函数覆盖样式/文本。
看这个例子：
$(document).ready(function()
$(".dropdown-toggle").css(
"color": "#212529",
"background-color": "#ffc107",
"border-color": "#ffc107"
);
$(".multiselect-selected-text").text('Select Tags');
);
【讨论】：
【参考方案13】：见https://bootstrap.themes.guide/how-to-customize-bootstrap.html
对于简单的 CSS Overrides，您可以在 bootstrap.css 下面添加一个 custom.css
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
对于更广泛的更改，SASS 是推荐的方法。
创建您自己的 custom.scss custom.scss 更改后导入 Bootstrap例如，让我们将body背景颜色更改为浅灰色#eeeeee，并将蓝色主要上下文颜色更改为Bootstrap的$purple变量...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* or, use an existing variable */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
【讨论】：
以上是关于CSS样式如何修改的主要内容，如果未能解决你的问题，请参考以下文章