使用“元”链接我一切正常，如果我在开发人员工具中添加新样式，它工作正常，但如果我在 Sublime Text 中添加相同的新样式，它不起作用，它什么都不做。 这是我作为 index.html 的 HTML 代码:
</!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Ferrari</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="css/navbar-fixed-top.css" rel="stylesheet">
<script src="js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#"><img src="gfx/ferrari-logo.jpg" alt="Ferrari logo" /></a>
</div>
<div id="navbar" class="collapse navbar-collapse ">
<ul class="nav navbar-nav navbar-right ">
<li class="active "><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
<center>
<video width="800" src="video/ferrari_458.mp4" controls></video>
</center>
<div class="container">
<h1 class="h1">Design</h1>
<h4 class="center">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</h4><br><br>
<h4 class="center">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</h4><br><br>
<h4 class="center">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</h4>
</div>
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
这是我的 CSS 文件 style.css:
.container {
position: relative;
}
.center {
position: absolute;
padding-left:
left: 80px;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
white-space: pre;
}
.h1, h1 {
font-size: 250%;
color: aqua;
}
为了让它发挥作用，我必须做什么？
最佳答案
您有“padding-left:”但没有提供值。 CSS 很可能由于语法错误而中断。
您可能想要删除此行或为该属性设置所需的值
关于jquery - 为什么我在 CSS 中的样式不起作用，因为我在 HTML 文件和 CSS 文件中给出了适当的类名？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37687706/