Fatal编程技术网
  • css/
  • CSS规则不影响HTML

CSS规则不影响HTML

css twitter-bootstrap twitter-bootstrap-3

CSS规则不影响HTML,css,twitter-bootstrap,twitter-bootstrap-3,Css,Twitter Bootstrap,Twitter Bootstrap 3,我使用bootstrap v.3，我想制作一个不同的按钮，所以我复制了所有的css类，将其重命名为myBigButton，并应用我的更改。工作完美。但是，在我的页面中，新类“myBigButton”不存在（当我从broswer中检查元素时…） 我的页面中有相同的代码 <div class="container"> <div class="row "> <div class="col-md-4">

我使用bootstrap v.3，我想制作一个不同的按钮，所以我复制了所有的css类，将其重命名为myBigButton，并应用我的更改。工作完美。但是，在我的页面中，新类“myBigButton”不存在（当我从broswer中检查元素时…） 我的页面中有相同的代码

<div class="container">
    <div class="row ">
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
        </div>
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
        </div>
        <div class="col-md-4">               
            <button type="button" class="btn myBigBtn btn-block">cccccc</button>
        </div>
    </div>
</div>
工作

更新

我添加了所有不起作用的css文件。

.myBigBtn和.btn具有相同的优先级，因此应用样式以将css文件包含到页面中。因此，btn将覆盖您的样式。这是最可能的原因。

一切正常

在引导CSS后的
中包含CSS文件：


...
<head>
    Bootstrap CSS
    Custom CSS
</head>
...



。。。
引导CSS
自定义CSS
...


HTML应如下所示：


<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BOOTSTRAP TEMPLATE</title>

        <!-- Bootstrap CSS -->
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="css/custom.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body id="body">
        <div class="container">
            <div class="row ">
                <div class="col-md-4">
                    <button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn myBigBtn btn-block">cccccc</button>
                </div>
            </div>
        </div>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </body>
</html>




引导模板
AAAAA
bbbbbb
中交


自定义CSS：


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







链接到外部CSS文件是良好做法，，您的问题在于评论：


//here is my class


css中的注释是这样做的


/* here is my class */



将注释更改为此，它应该可以工作
交叉检查您的css文件，我怀疑这可能是因为任何右括号“}”都可能是缓存问题？您是如何包含css类的？将css包含在引导程序的顶部或使用
！重要信息
或清除浏览器捕获始终确保您的customize.css文件包含在（以下）默认bootstrap.css文件之后。哦，天哪。。。对这就是原因。。。。提交答案以获取积分实际上，由于
.myBigBtn
是在引导样式之后声明的，如果它与您不理解的指定级别相同，则应优先考虑
class=“btn myBigBtn btn block”
这一点都不重要
vs
确实如此。您不明白：自定义样式包含在引导样式之后，因此
。myBigBtn
将在
之后贴花。btn
因此将覆盖
。btn
。在你上面的评论中，第一个版本有效，第二个版本无效：是的，第一个是正确的。第二个不是。在他提到之前，你怎么可能知道作者是如何包含他的css样式的呢？看看问题中的bootply链接，它确实有效。。然而，我很好奇为什么我在相同的.cssAt中添加时它不起作用，最后是
.myBigBtn.badge
。在
.myBigBtn
中class
.badge
是什么意思。您只需要
.myBigBtn
！

/* here is my class */