Question

我正在使用simplecart.js为我生成数据以添加到购物车，然后将其传递给PayPal。

我已经成功添加了“添加到购物篮”和“结帐”功能，但我发现无法使用JS生成的代码，因为没有适用于它的样式。

这是代码网站给我的，它从存储的数据中生成许多项目，如名称，数量等。它正确输出所有信息，但应用于类名的任何样式都不起作用。

这是生成数据的代码：

<div class="simpleCart_items"></div>

这是网络浏览器的结果：

<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>

<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The &nbsp;Jenny&nbsp;Snood&nbsp;£11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
  <a href="javascript:;" class="simpleCart_remove">Remove</a>
</div>
</div>
</div>
</div>

浏览器正在正确接收所有数据，但将任何样式应用于类名都不起作用。例如，我有：

.headerRow{
background-colour:#0F0;
}

结果应该是headerRow的背景是石灰，但没有任何反应。它没有正确地调用样式。

我已尝试过所有内容，但没有一个类会获取应用于它们的样式。

以下是它的外观截图，显然不是很好看，但我根本不能应用任何样式。

Cart unstyled

Here is a link to the live site

进一步的例子：

我添加了生成总计的代码：

<div class="simpleCart_total"></div>

我已经尝试过给它自己的新课程并且还有原创样式，重要的是 - 这一切都没有。

<div class="totals simpleCart_total"></div>
.simpleCart_total{
  background-color:#0F0 !important;
}
.totals{
  background-color:#0F0 !important;
}

以上所有内容似乎都没有任何影响。

Answer 1

这里的问题是CSS后面的js动态应用样式（即在插件初始化期间）。我认为，你只希望在用你自己的js初始化之后设置它。

你可以在Firebug中检查一下......如果你看一下那里的元素，你会看到一堆内联样式被应用到它们。这些将胜过标题中的CSS（甚至是您事先提供的内联CSS）。

编辑：我在相关指令之前看到了一些垃圾字符（以及另一个答案中指出的字符）。我会尝试删除前一个指令之后和破坏之前的所有空格。似乎js没有动态改变任何东西。

Answer 2

还有一些其他css或内联JavaScript会影响您尝试使用的自定义样式。

要缓解此问题，请执行以下操作之一：

在每个css语句之后添加！important如下：

.headerRow {background-color：＃0F0！important;}
重新排序css文件，以便自定义css文件位于底部

Javascript输出将不接受任何CSS样式

2 个答案: