在我的Checkout html页面中，有一个专门用于检出产品的部分：
<div class="col s12 m12 l6">
<div id="checkout-products-section">
</div>
<div id="paypal-button-container"></div>
</div>在其中，我使用js脚本注入内容，该脚本基于本地存储中可用的数据构建内容：
$(document).ready(function () {
showCheckoutProductsSection();
});
function showCheckoutProductsSection() {
let checkoutProductsSection = document.getElementById("checkout-products-section");
let cartProducts = JSON.parse(window.localStorage.getItem("cartProducts"));
cartProducts.forEach(cartProduct => {
let checkoutProductCard =
`
<div class="card horizontal">
<div class="card-image">
<img class="responsive-img" src="` + cartProduct.image + `"cart></img>
</div>
<div class="card-content">
<span id="product-title">
<img class="responsive-img" src="` + cartProduct.imageTitle + `"></img>
</span><br/>
<span>Name: </span><span id="product_name" class="product-payment-info">` + cartProduct.name + `</span><br/>
<span>Code: </span><span id="product_sku" class="product-payment-info">` + cartProduct.sku + `</span><br/>
<span>Subtotal: </span><span id="product_price" class="product-payment-info">` + cartProduct.standardPrice + `</span><span> </span>
<span id="product_price_currency" class="product-payment-info">` + cartProduct.currency + `</span>
</div>
</div>
`;
checkoutProductsSection.innerHTML += checkoutProductCard;
});除了应该应用于动态添加的内容的CSS样式外，其他所有工具都工作正常：样式已部分应用。有多个CSS文件：materialize.css和我的自定义main.css文件（包含我自己定义的样式）。materialize.css中定义的样式在动态添加的内容上起作用（例如，“水平卡片”），但是main.css中定义的样式（在“产品付款信息”中）不起作用。
以下是来自main.css文件的“产品付款信息”类的示例：
.product-payment-info{
font-family: 'Arimo', sans-serif;
font-size: 15px;
text-align: justify;
text-justify: inter-word;
color: black
}使用checkout html页面（位于头部）中的链接加载文件main.css：
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}" />对于其他产品，我还有另一个结帐页面，其中我没有动态创建内容，并且main.css文件在那里正常工作。
我正在测试最新版本的Google Chrome。
最终我发现了问题：在css文件的某个位置出现了语法错误（在“}”之后添加了关闭类的语法；这个问题是为什么语法错误后定义的css类（例如我在结帐页面中需要的类）未应用到html页面的原因。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句