Question

我正在开发一个网站，在这个网站的某些页面上有一些服务加上他们的相关价格（我使用WordPress作为CMS）。

我会以不同的方式为所有价格着色，我会知道是否存在一些自动方式来执行此操作，例如使用Javascript或仅使用特定的CSS规则。

备选方案可以手动插入html标签中的所有价格，例如“<span class='price'>...</span>”，但对我来说，这将是一种糟糕而无聊的方式; - ）

由于

Answer 1

你的HTML实际上是一个很难追溯的东西。每个段落似乎都有自己的div - 这是一个禁忌，p标签存在是有原因的。此外，所有这些div都没有办法单独识别，这意味着你永远无法找到你需要的那个。

老实说，这里最好的办法就是把这个范围放在你找到的每一个价格上。

你总是可以追踪所有强大的元素，因为它们只是在价格旁边使用，但它可能会在其他地方（如果你有的话）使用强标签的其他用途。由于CSS似乎没有办法找到父元素，所以你必须通过JS来做到这一点：

var pricedivs = document.getElementsByTagName("strong");
for (var i = 0; i < pricedivs.length; i++) {
  pricedivs[i].parentNode.className = "price";
}

相关的CSS：

.price { color: red; }
.price strong { color: black; } /* We only want the text beside the strong tag, so set the style back */

效果是带有强标签的文本周围的所有文字都将显示为红色。

Answer 2

您可以分享任何代码，以便我们了解您的情况吗？只要价格与其他价格分开，您就可以为它创建一个CSS条目。

此外，建议不要使用JS格式化页面，除非您真的找不到任何其他方法来访问所需页面的确切部分，否则不应该这样做。

编辑：我猜你可以做的是使用JS搜索文本中的任何数字，然后将其包围起来。然后CSS将完成剩下的工作。但是，如果您在搜索文本时不小心，这可能会很昂贵，并且对于任何已禁用JS的人来说，这些数字都不会显示颜色。

Answer 3

我做了一个例子。在此页http://www.3jolieistitutodibellezza.it/corpo-donna/中，价格的结构如下：

<div><strong>Polyglyco Pell:</strong> 25,00</div><div>A base di Poli Idrossiacidi e Alfa Idrossiacidi, favorisce  l&#8217;eliminazione delle cellule morte, agevola il turnover cellulare, dona  turgore e levigatezza</div><div>al tessuto. Indicato per pelli spesse, ipercheratosiche, favorisce la riduzione delle smagliature di recente formazione.</div>

如果不使用JS，可能无法找到价格并为其着色。

为价格着色的唯一简单方法可能是为包含价格的div容器添加class属性并应用简单的CSS规则。

你怎么看？

如何为数字着色

3 个答案: