javascript - "suppress inherited styles"(和背景？)缺少 CSS 功能的解决方法

Question

我的 DOM 情况如下所示:

• A 是 B 的祖先，而 B 又是 C

的祖先

• 最初，A 具有继承给 B 和 C

的样式

• 我希望通过给 highlighted 类临时突出显示 B

  ...然而...

• 我想“转义”C 上的突出显示，以便尽可能少地更改

好像this is not possible在 CSS 的级联范例中。 “取消应用”样式的唯一方法是应用覆盖样式。我的问题是高亮代码位于一个插件中，该插件想要与任意页面的现有 CSS 很好地配合使用……我的选择器是这样的:

/* http://www.maxdesign.com.au/articles/multiple-classes/ */
.highlighted.class1 {
    background-color: ...
    background-image: ...
    ...
}
.highlighted.class2 {
   ...
}
/* ... */
.highlighted.classN {
   ...
}

背景是一个棘手的问题...因为虽然它不是继承的 CSS 属性，但更改祖先的背景可以改变后代的外观(如果它们具有透明背景)。所以这是导致我试图否定的那种破坏的例子。 :-/

是否有任何例子表明人们如何抑制这种时尚变化的继承？也许使用诸如 caching computed styles 之类的技巧？我正在寻找至少比功能级 Hook 更智能的任何默认技术，该 Hook 说“嘿，插件突出显示了这个节点......做你需要的视觉补偿。”

---

更新我已经创建了这个场景的基本 JsFiddle 来帮助使讨论更清晰:

http://jsfiddle.net/HostileFork/7ku3g/

Answer 1

如果我没理解错的话，你想在祖先的背景上切一个“洞”。 我能想到的唯一方法是使用 <canvas>切割孔，然后将生成的图像用作祖先的背景。

这是我的代码:http://jsfiddle.net/7ku3g/24/

我使用 JS Fiddle Logo 作为水印，因为您无法检索绘制了跨域资源的 Canvas 内容。

更新:您还想收听 resize当窗口大小改变时更新背景的事件。