我已尝试过!important以外的所有内容。无论我在哪里尝试更改从我的AJAX请求中检索到的文本的字体大小，我都会转到开发控制台，它会显示我的字体大小的CSS划掉并将Bootstrap作为活动状态。我已经将font-size属性放在每个可能的位置，包括内联，但是，故事保持不变：当页面加载时，我看到90px字体的默认文本，但是当我点击按钮检索文本时从远程服务器，我得到Bootstrap的字体大小，通常大约14px。下面，您可以看到我的许多失败/多余尝试来克服此问题。有什么想法吗？
<!DOCTYPE html>
<html lang="en">
<!-- Bootstrap Links & Google Font Links-- Placement At Top Works Better in IDE used for Development -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Great+Vibes">
<!-- style -->
<style>
body {
font-family: Great Vibes, serif;
background-color: #8A2BE2;
font-size: 90px;
color: #FFFFFF;
}
#display {
background-color: #000000;
color: #FFFFFF;
font-size: 90px;
min-height: 50%;
min-height: 50vh;
margin: 100px 200px 100px 200px;
align-items: center;
}
/* word-wrap added to ensure quote remains in container */
.quote-formatting {
font-family: Great Vibes, serif;
font-size: 90px;
word-wrap: break-word;
}
#bootstrap-font-override {
font-size: 90px;
}
</style>
<script>
$(document).ready(function () {
$("#getQuote").on("click", function () {
$.ajax({
crossDomain: true,
dataType: "jsonp",
url:"https://api.forismatic.com/api/1.0/",
// appended to url in GET request as specified by API docs
jsonp: "jsonp",
data: {
method: "getQuote",
format: "jsonp",
lang: "en"
},
// take contents of JSON file from API and update html
success: function (json) {
var html = "";
html += '<h3>"' + json.quoteText + '"</h3>';
html += '<h5> -' + json.quoteAuthor + '</h5>';
$(".json-text").html(html);
},
// display when ajax request doesn't quite work out
error: function () {
alert("error!");
}
});
});
});
</script>
</head>
<body id="bootstrap-font-override">
<div id="container-top" class="vertical-align container">
<div class="container text-center">
<h1>Heading</h1>
</div>
<div id="display" class="row">
<div id="bootstrap-font-override" class="col-md-12 quote-formatting text-center">
<div style="font-size: 90px" id="bootstrap-font-override" class="json-text">Replace text on button click</div>
</div>
</div>
</div> <!-- container-top -->
<div id="container-btm" class="container">
<div class="row">
<div class="col-md-12 text-center">
<button id="getQuote" class="btn btn-default">Get Quote</button>
</div>
</div>
</div> <!-- container-btm -->
</body>
</html>
答案 0 :(得分：1)
字体样式正在应用于您回复的h3，而不是容器。但是，您尝试将样式应用于容器。这些尝试不会覆盖h3样式。
您需要定位h3：
#bootstrap-font-override h3 {
font-size: 90px;
}
// pass in $ as argument to clear subsequent errors when using $; this is a clound9 IDE issue.
$(document).ready(function () {
$("#getQuote").on("click", function () {
$.ajax({
crossDomain: true,
dataType: "jsonp",
url:"https://api.forismatic.com/api/1.0/",
// appended to url in GET request as specified by API docs
jsonp: "jsonp",
data: {
method: "getQuote",
format: "jsonp",
lang: "en"
},
// take contents of JSON file from API and update html
success: function (json) {
var html = "";
html += '<h3>"' + json.quoteText + '"</h3>';
html += '<h5> -' + json.quoteAuthor + '</h5>';
$(".json-text").html(html);
},
// display when ajax request doesn't quite work out
error: function () {
alert("error!");
}
});
});
}); body {
font-family: Great Vibes, serif;
background-color: #8A2BE2;
font-size: 90px;
color: #FFFFFF;
}
#display {
background-color: #000000;
color: #FFFFFF;
font-size: 90px;
min-height: 50%;
min-height: 50vh;
margin: 100px 200px 100px 200px;
align-items: center;
}
/* word-wrap added to ensure quote remains in container */
.quote-formatting {
font-family: Great Vibes, serif;
font-size: 90px;
word-wrap: break-word;
}
#bootstrap-font-override h3 {
font-size: 90px;
}<html lang="en">
<!-- Bootstrap Links & Google Font Links-- Placement At Top Works Better in IDE used for Development -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Great+Vibes">
<!-- style -->
<div id="container-top" class="vertical-align container">
<div class="container text-center">
<h1>Heading</h1>
</div>
<div id="display" class="row">
<div id="bootstrap-font-override" class="col-md-12 quote-formatting text-center">
<div id="bootstrap-font-override" class="json-text">Replace text on button click</div>
</div>
</div>
</div> <!-- container-top -->
<div id="container-btm" class="container">
<div class="row">
<div class="col-md-12 text-center">
<button id="getQuote" class="btn btn-default">Get Quote</button>
</div>
</div>
</div> <!-- container-btm -->
答案 1 :(得分：1)
您需要覆盖h3和h5标签