Bootstrap CSS不会被覆盖吗?

马特·辛茨克(Matt Hintzke)

我在我的网站上使用Bootstrap CSS并在<head>元素中加载在加载boostrap的下面,我有一个<style>元素试图在引导中覆盖一些CSS,但是当我查看Chrome Dev Inspector时,它并没有覆盖它。我认为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>
bjb568

你可能想要!important

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

特异性是浏览器决定哪些属性值与元素最相关并被应用的一种方法。特异性仅基于由不同种类的选择器组成的匹配规则。

重要的:

在样式声明上使用!important规则时,此声明将覆盖CSS声明中位于列表中任何位置的其他任何声明。虽然,!important与特异性无关。使用!important是不好的做法,因为它破坏了样式表中的自然层叠,使调试变得很困难。

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章