有没有现成的类库函数库,可以在CSS的每个选择器前加标签从而避免不同CSS中相同选择器冲突?

欧路WINDOWS版工作时内部为每一个MDX词库的CSS进行了处理:将每一个CSS选择器selector前面加上了一个标签名,内部每一个打开的MDX词库的HTML都会加载到相应的这个标签之下。这样做的目的是为了避免不同词库CSS可能使用相同的选择器而产生冲突。

现在我想问高级语言中有没有现有的库函数或者方法,无论是JS,JAVASCRIPT,PYTHON,C#,哪种语言都可以,可以拿来直接调用完成这个工作,而不用自己编程做这件事情?

我有这个需求,是因为我想用任何一种高级语言编程,从多个MDX词库中提取出我私人订制的生词表中的词的解释放到同一个HTML文件中进行阅读(而不是查词)

这件事情看起来很简单,只要利用高级语言中的正则库找到CSS中每一个selector然后在前面加个字符串标签就可以了。但是考虑到CSS可能有的指令比较怪异不符合通常的指令语法,因为我这不是在为特定的某几部MDX的CSS处理,而是在寻求通用的方法,所以必须保证程序非常健壮,任何CSS指令都能识别得很好。如果有好轮子了就不必自己造轮子了。

望大家指点。

2 Likes

这是不是要同时改两处地方:css和mdx源文本

看了 last_idol 意识到我想错了。我也以为楼主想要改源文本。

参考:GitHub - liuyug/flask-mdict: Flask Mdict Server. Query word online with MDICT dictionary

谢谢你的信息。
但是我无法理解 JavaScript它怎么可能做到隔离?我用JS语句找到节点进行操作是可以很灵活的,不是CSS那种定死语法的指令,它怎么可能那么智能能识别我的JS代码正确修改?
我以前和欧陆技术支持聊过类似话题,他们也是说他们只能隔离CSS, 而JS他们也是没有万能的隔离方法干脆不作处理,只是要求程序员自己多注意在用JS选择元素的时候选择器前面加隔离标签。

大概看了一下Shadow DOM的资料。貌似都需要用JS代码来创建和装配Shadow DOM,而且都是动态生成Shadow DOM的节点。而我的应用仅仅是将不同词典MDX中同一个词条的解释抽取出来放在一起。这些词条解释HTML都是静态的预先知晓的,根本无需用JS来动态生成。
能不能避免使用JS,在HTML中用某种语法标记(有这种标记吗?)将每部MDX中该词条的内容封装起来,它们原配的的CSS,JS照常引入不修改而互不冲突影响?

对不起,我搞错了,Shadow DOM只能隔离样式,JavaScript 的隔离需要使用沙箱之类的库,之前用框架开发搞混了。或者可以考虑下 iframe?,Preview 也是用的 iframe,缺点是在现代浏览器里,每个 iframe 都是一个独立的进程,嵌入多少个 iframe 就会开启多少个新进程,不能嵌入太多 iframe。

最近发现 Mdict 的多词典查询联合模式似乎用的 iframe,这样就可以直接引入 css、js 而无需操心隔离了。再监测一下 iframe 的 scrollHeight 动态变化,去掉讨厌的双滚动条。相比修改 css、js 里的选择器,似乎更简单易行。