Question

我正在使用Bootstrap CDN。根据3条规则，最后2条规则不起作用。图像不会调整大小，也不会改变标题的字体颜色。

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="./stylesheets/portada.css">
</head>
<body>

    <div class="container-fluid">
    <div class="row">
        <div class="section1">
            <h2 class="text-center">Heading</h2>
            <img class="img-responsive" src="./images/8.jpg">
        </div>
    </div>
</div>


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

CSS

.section1 {                        // Working
background-color: #363b48;
color: blue;
height: 100px;
}

.section1 .text-center{             // Not working
    color: #985475;
    margin-top: 20px;
    background-color: red;
}

.section1 img{                      //Not working
    width:20px;
}

Answer 1

试试这个，虽然你的作品也应该起作用

.section1 h2{           
color: #985475;
margin-top: 20px;
background-color: red;
}

Answer 2

我发现你的代码中有两个问题。

首先， CDN不应通过http 加载，而应加载https。对于加载时跨域问题最好只使用 // 没有http或https。这样它就会加载而不会产生跨域问题。

例如：<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

其次是你使用评论，这应该是/ * * / 而不是//单斜杠，因为它们在同一条线上一些CSS代码。

看看修复它们的外观：

.section1 {                        /* Working*/
background-color: #363b48;
color: blue;
height: 100px;
}

.section1 .text-center{             /* Working*/
    color: #985475;
    margin-top: 20px;
    background-color: red;
}

.section1 img{                      /* Working*/
    width:20px;
}

<强>样本

http://jsfiddle.net/a_incarnati/undmcszz/9/

Answer 3

我无法确定，但我敢打赌问题在于portada.css，因为它（可能）在您当地的环境中可用，但不在网上代码编辑中。

Css规则具有重要性，具体取决于具体情况。即使您在旧版规则之上提供新规则，也会应用最重要的规则。请参阅此网站以帮助计算特异性：http://specificity.keegan.st/

Answer 4

您的HTML应该在第一行包含下一个代码：

<!DOCTYPE html>
<html>
<head>

CSS简单的线条不起作用

4 个答案: