缺乏CSS功能以"抑制继承样式"(和背景？)的解决方法

Question

我有一个DOM情况,如下所示:

• A是B的祖先,它又是C的祖先

• 最初,A具有继承到B和C的样式

• 我希望通过给它一个突出显示的课程来暂时突出显示B.

  ...然而...

• 我想"逃避" C上的突出显示,以便尽可能少地改变

在CSS的级联范例中,这似乎是不可能的."取消应用"样式的唯一方法是应用重写样式.我的问题是突出显示代码在一个插件中,想要与任意页面的现有CSS一起播放...我的选择器是这样的:

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

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

是否存在人们如何以这种方式抑制变化的继承？也许使用缓存计算样式等技巧？我正在寻找任何默认技术,它至少比功能级别的钩子更聪明,它说"嘿,插件突出了这个节点......做你需要的视觉补偿."

---

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

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

Answer 1

在 javascript 中管理所有 CSS 更改，以便轻松撤消它们。正如你所说，这在纯 CSS 中是不可能的，但你可以通过 javascript 缓存样式。

步骤：

1. 定义突出显示内将忽略哪些类型的元素
2. 检查您的父母中是否有背景图像
3. 如果这样做，请保存图像和该元素的offset()
4. 抓取后代元素
5. 保存当前的 CSS 样式（突出显示之前）
6. 将突出显示样式应用到目标
7. 为后代重新应用保存的样式
8. 如果父级有背景图像，则相应地计算并偏移图像

这使内部元素的所有样式保持完整，并考虑了“穿过”透明背景的背景图像。

这是一个测试： http: //jsfiddle.net/W4Yfm/2/

不过，这会留下一堆混乱的样式属性，您可能需要清理它。可能也存在未提及的边缘情况。

为了最可靠，你应该使用 @Jan 指出的技术（在画布上绘制突出显示），但 IE < 9 不支持，而且对于移动设备来说可能太慢了。