# 有没有现成的类库函数库，可以在CSS的每个选择器前加标签从而避免不同CSS中相同选择器冲突？ **URL:** \ **Category:** 技术交流与词典编修\ **Created:** [2021 年6 月 23 日 03:08 UTC](https://forum.freemdict.com/t/topic/6933 "2021-06-23T03:08:38Z")\ **Posts on this page:** 13\ **Page:** 1
作者： ![lbhl](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/l/bcef8e/32.png) [@lbhl](https://forum.freemdict.com/u/lbhl)\ 发布日期： [2021 年6 月 23 日 03:08 UTC](https://forum.freemdict.com/t/topic/6933/1 "2021-06-23T03:08:38Z")
欧路WINDOWS版工作时内部为每一个MDX词库的CSS进行了处理：将每一个CSS选择器selector前面加上了一个标签名，内部每一个打开的MDX词库的HTML都会加载到相应的这个标签之下。这样做的目的是为了避免不同词库CSS可能使用相同的选择器而产生冲突。 现在我想问高级语言中有没有现有的库函数或者方法，无论是JS,JAVASCRIPT,PYTHON,C#，哪种语言都可以，可以拿来直接调用完成这个工作，而不用自己编程做这件事情？ 我有这个需求，是因为我想用任何一种高级语言编程，从多个MDX词库中提取出我私人订制的生词表中的词的解释放到同一个HTML文件中进行阅读（而不是查词） 这件事情看起来很简单，只要利用高级语言中的正则库找到CSS中每一个selector然后在前面加个字符串标签就可以了。但是考虑到CSS可能有的指令比较怪异不符合通常的指令语法，因为我这不是在为特定的某几部MDX的CSS处理，而是在寻求通用的方法，所以必须保证程序非常健壮，任何CSS指令都能识别得很好。如果有好轮子了就不必自己造轮子了。 望大家指点。 ---
作者： ![Mandolin](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/mandolin/32/4948_2.png) [@Mandolin](https://forum.freemdict.com/u/Mandolin)\ 发布日期： [2021 年6 月 23 日 03:17 UTC](https://forum.freemdict.com/t/topic/6933/2 "2021-06-23T03:17:20Z")
这是不是要同时改两处地方：css和mdx源文本 ---
作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\ 发布日期： [2021 年6 月 23 日 04:29 UTC](https://forum.freemdict.com/t/topic/6933/4 "2021-06-23T04:29:45Z")
看了 last\_idol 意识到我想错了。我也以为楼主想要改源文本。 参考：[GitHub - liuyug/flask-mdict: Flask Mdict Server. Query word online with MDICT dictionary](https://github.com/liuyug/flask-mdict) ---
作者： ![lbhl](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/l/bcef8e/32.png) [@lbhl](https://forum.freemdict.com/u/lbhl)\ 发布日期： [2021 年6 月 23 日 05:12 UTC](https://forum.freemdict.com/t/topic/6933/5 "2021-06-23T05:12:54Z")
谢谢你的信息。 但是我无法理解 JavaScript它怎么可能做到隔离？我用JS语句找到节点进行操作是可以很灵活的，不是CSS那种定死语法的指令，它怎么可能那么智能能识别我的JS代码正确修改？ 我以前和欧陆技术支持聊过类似话题，他们也是说他们只能隔离CSS, 而JS他们也是没有万能的隔离方法干脆不作处理，只是要求程序员自己多注意在用JS选择元素的时候选择器前面加隔离标签。 ---
作者： ![lbhl](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/l/bcef8e/32.png) [@lbhl](https://forum.freemdict.com/u/lbhl)\ 发布日期： [2021 年6 月 24 日 10:21 UTC](https://forum.freemdict.com/t/topic/6933/7 "2021-06-24T10:21:11Z")
大概看了一下Shadow DOM的资料。貌似都需要用JS代码来创建和装配Shadow DOM，而且都是动态生成Shadow DOM的节点。而我的应用仅仅是将不同词典MDX中同一个词条的解释抽取出来放在一起。这些词条解释HTML都是静态的预先知晓的，根本无需用JS来动态生成。 能不能避免使用JS，在HTML中用某种语法标记（有这种标记吗？）将每部MDX中该词条的内容封装起来，它们原配的的CSS,JS照常引入不修改而互不冲突影响？ ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2021 年6 月 24 日 10:40 UTC](https://forum.freemdict.com/t/topic/6933/8 "2021-06-24T10:40:07Z")
对不起，我搞错了，Shadow DOM只能隔离样式，JavaScript 的隔离需要使用沙箱之类的库，之前用框架开发搞混了。或者可以考虑下 iframe?，Preview 也是用的 iframe，缺点是在现代浏览器里，每个 iframe 都是一个独立的进程，嵌入多少个 iframe 就会开启多少个新进程，不能嵌入太多 iframe。 ---
作者： ![dorothyilatorre](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/dorothyilatorre/32/16481_2.png) [@dorothyilatorre](https://forum.freemdict.com/u/dorothyilatorre)\ 发布日期： [2021 年6 月 24 日 11:00 UTC](https://forum.freemdict.com/t/topic/6933/9 "2021-06-24T11:00:17Z")
> **[GitHub - Wildhoney/ReactShadow: Utilise Shadow DOM in React with all the...](https://github.com/Wildhoney/ReactShadow)** > > :beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation. - GitHub - Wildhoney/ReactShadow: Utilise Shadow DOM in React with all the benefits of style encapsulation. ---
作者： ![Johnny\_Van](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/johnny_van/32/9431_2.png) [@Johnny\_Van](https://forum.freemdict.com/u/Johnny_Van)\ 发布日期： [2021 年6 月 29 日 11:18 UTC](https://forum.freemdict.com/t/topic/6933/10 "2021-06-29T11:18:49Z")
最近发现 Mdict 的多词典查询联合模式似乎用的 iframe，这样就可以直接引入 css、js 而无需操心隔离了。再监测一下 iframe 的 scrollHeight 动态变化，去掉讨厌的双滚动条。相比修改 css、js 里的选择器，似乎更简单易行。 ---
作者： ![oil](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/o/e68b1a/32.png) [@oil](https://forum.freemdict.com/u/oil)\ 发布日期： [2021 年10 月 27 日 11:41 UTC](https://forum.freemdict.com/t/topic/6933/11 "2021-10-27T11:41:47Z")
请问一下，楼主的问题解决了吗？最终用了什么方法呢？ ---
作者： ![oil](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/o/e68b1a/32.png) [@oil](https://forum.freemdict.com/u/oil)\ 发布日期： [2021 年10 月 28 日 09:52 UTC](https://forum.freemdict.com/t/topic/6933/12 "2021-10-28T09:52:04Z")
规范词典html代码，让所有词典可以共用一个css文件，是否可行？ 我记得以前有人好像说过的为词典制定一个统一标准的的想法。 任何一个词典的文章都可以分成若干类。比如词头，词性，音标，解释，例句，喇叭图标等等 为每一类制定一个代码规范，让所有词典可以共用一个css文件， 这样可以 1避免css冲突 2在一个页面加载多部，十多部，几十部词典的情况下，提升速度。 ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2021 年10 月 28 日 10:11 UTC](https://forum.freemdict.com/t/topic/6933/13 "2021-10-28T10:11:04Z")
CSS样式冲突问题，GD已经给了解决方案了。 ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2022 年5 月 23 日 11:50 UTC](https://forum.freemdict.com/t/topic/6933/15 "2022-05-23T11:50:04Z")
给所有选择器前面添加标签的方法，就是下面这个，其他语言参考翻译下就可以了。 > ---
作者： ![oil](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/o/e68b1a/32.png) [@oil](https://forum.freemdict.com/u/oil)\ 发布日期： [2022 年5 月 23 日 11:55 UTC](https://forum.freemdict.com/t/topic/6933/16 "2022-05-23T11:55:28Z")
GD的解决方案是最好的。我想让所有词典共用一个css的想法是错误的。