css - 使 css 文件仅匹配特定 id 的工具

Question

我需要在我的网页中包含一个 css 文件，但问题是它只能在某个 div 内匹配。示例:

普通 CSS 文件:

#main td {
padding:20px;
}

额外的 CSS 文件:

.myclass td {
padding:0px;
}

HTML:

<div id="main">
    <table><tr><td>TD with padding 20px</td></tr></table>
    <div id="inside" class="myclass">
         <table><tr><td>TD which should have with padding 0px, but get padding 20px; </td></tr></table>
</div>

这只是一个简化的例子 - 实际上，额外的 css 文件非常长且复杂(我需要包含一个 tinymce，但这里的 css 定义仅由类创建，因此被“正常"css 文件)。

我的问题是:是否有一种工具(也许是 PHP 中的？)能够更改附加的 css 文件以仅在特殊 id 上工作？在示例中，它应该将附加 css 文件中的所有条目更改为:

#inside .myclass td {
    padding:0px;
    }

当然还有输出一个具有有效语法的 css 文件。

Answer 1

您可以使用 SASS .它是用 ruby​​ 而不是 php 编写的，但它可以使用嵌套规则轻松地做你想做的事情:

#inside {
  .myclass td {
    padding: 0;
  }
}

将编译为:

#inside .myclass td {
  padding: 0;
}

要在给定文件中为每个选择器添加前缀，您可以使用 nested import如以下示例所示:

/* File vendor.scss */
.myclass td {
  padding: 0;
}

您的导入文件:

/* File main.scss */
#inside {
  @import "vendor";
}

这将给出与上述示例相同的结果。

请注意，使用嵌套导入时，您导入的文件必须是 .scss 文件。