Question

是否可以将框架的CSS类限制为某些部分？

我想将实体化框架中的某些组件包含到使用完全相同的类名的现有wordpress主题中。遍历整个物化的css文件并重命名每个文件将是太多的工作，而且无论如何都无法工作，因为我还需要像table这样的类。

我曾考虑过使用iframe，但是在响应能力方面，这确实是一个痛苦。

Answer 1

这些是否在单个页面上？如果是这种情况，您将不得不为一个框架或另一个框架重命名元素。

如果它们在不同的页面上，则可以加载一个CSS文件，具体取决于您希望在特定页面上应用哪种框架。

出于好奇，我尝试了这个

    <style>
        .test{
            color:red;
        }
    </style>
    <p class="test">Will this be red?</p>
    <style>
        .test{
            color:black;
        }
    </style>
    <p class="test">This may be black</p>

它不起作用

Answer 2

我通过编写一个肮脏的python脚本解决了部分问题，该脚本在自定义类名的前面 .material）到框架中的每种样式。

然后，我将材料设计卡放入.material div容器中，并且似乎可以正常工作。

我还尝试通过使用this solution here重设material容器内的所有主题样式。虽然那似乎并没有影响它。

以某种方式仍然无法在表格中使用。我甚至为每种表格样式设置了!important标志，但是没有效果。

Answer 3

您可以向排除的元素中添加其他类，并使用!important的CSS规则。这样，您将强制排除的元素仅采用您想要的CSS。

Answer 4

我相信此摘要可能会回答您的问题。

这显示了将相同的类分配给所有元素时不同CSS元素的工作方式。然后，您可以使用一个类轻松控制每个元素，例如将此类分配给包装的<div>，不给包含的元素分配任何类，而是在CSS中定义它们。

.test {
	background: blue;
}

.test table {
	background: red;
}

.test p {
	background: yellow;
}

.test div {
	background: green;
}

<table class="test">
<tr>
<td>Hello</td>
<td><p class="test">Hello too</p></td>
</tr>
</table>

<p class="test">Oh no</p>
<div class="test"><p class="test">Omfg</p></div>

Answer 5

解决此问题的最佳方法是下载框架的源文件并编译适合您的用例的自定义版本。您可以修改生成的类名，并删除不需要的框架部分，从而生成一个更小的包含唯一类名的.css文件。

对某些部分使用另一个CSS框架

5 个答案: