css - 将条件 CSS 选择器应用于 magento 属性

Question

我正在尝试执行以下操作:

我已经为我的产品设置了一些 Magento 属性，我想在名为“颜色”的属性旁边显示一个图标，并将 alt 标签附加到该图标/图像。我的主题将每个属性都设置为 dt 标签，因此我尝试应用的 css 如下:

dt[foo^="Color:"]{background: url(http://xyz.com/skin/frontend/default/default/images/warning.png) no-repeat 100% 0%;}

这是标记: <div class="white-box-inner">' '<dl class="attribute-list clearfix">``<dt class="first">Size:</dt>``<dd class="first">21</dd> <dt>Manufacturer:</dt>``<dd>Hat Designs</dd>``<dt>Color:</dt> <dd>Red</dd>``<dt>Fabric</dt> <dd>Felt</dd> </dl> </div>

• 然而，这并没有显示我想要显示的图标。
• 我也不确定如何通过 css 将 alt 标签与该图标相关联。我不想弄乱模板文件。任何帮助表示赞赏。

谢谢。-TM

Answer 1

从您的标记看来，您正试图通过其内容选择一个元素。属性选择器只按属性选择；他们不按内容选择。

本来会有一个 :contains() 伪类，但它已从规范中删除，因此您不能再使用 CSS 选择器来实现这一点。

jQuery implements :contains() , 不过，因此您可以简单地使用 jQuery 添加一个类并为该类设置样式。

此外，您不能将替代文本或工具提示关联到 CSS 中的背景图像。您将不得不通过 JavaScript 路线来实现这一目标。