html - CSS 提取(和范围调整)工具

Question

我有一个带有主父 div 标签的网页

<div class="mainDiv">...</div>

包含大量的子元素。该页面有一个外部样式表，主要是元素选择器而不是类选择器:例如。

img {...}

代替

.myImgCls {...}

我需要一个包含仅应用于我的 mainDiv div 标记的全局(页面)css 的样式表，以便我可以轻松地将我的 mainDiv html 连同新样式表一起注入(inject)任何页面，而不会干扰新的页面的元素选择器。

所以，我基本上是在寻找一种可以生成类似以下内容的工具:

.mainDiv img {...}

对于我的 mainDiv 中的所有内容。

手动执行此操作是不可能的，因为 mainDiv 中有大量元素。

进一步阐述:jplist 需要这个，它带有标准的 jplist.demo-pages.css；然而，标准 jplist.demo-pages.css 不是仅对 jplist 实例进行样式设置，而是主要包含元素选择器，因此如果我想直接在页面上添加标准 jplist 实例，我必须使用 jplist.demo-pages.css这会干扰我页面的原始样式表。

Answer 1

如果您正在寻找一种将所有这些元素嵌套在主 div 中的简单方法，您可以尝试 Sass :

.mainDiv

    // Child selectors go here

注意:缩进很重要。