css - 使 CSS 文件中的所有规则仅适用于 id 的后代

标签 css

我有一个带有一堆规则的 CSS。我发现这些规则与我的应用程序的其他部分冲突。解决方案是使这些规则仅对特定 id 的后代(直系或非直系)有效:

<div id="thisOne">
    <!-- the CSS rules should be active ONLY here -->
</div>

#thisOne p { color: red; }

但是,如果在 CSS 文件中的所有规则(数十个!)之前都使用 #thisOne 选择器,那将是非常丑陋的。有没有更好的办法?

最佳答案

我使用 Less, a CSS pre-processor帮助处理这些事情。我还使用一个名为 Crunch 的软件.但是,它可以从 here 下载。 .

为了让您了解其工作原理,让我们举个例子。

在 less 下(编译前)

#thisOne {
    p {
        color:red;
    }
}

然后您可以根据需要添加到规则中。即:

#thisOne {
    width:300px;
    margin-left:50px;
    h1 {
        font-weight:lighter;
        color:blue;
    }
    p {
        color:red;
    }
}

您可以做的远不止这些。一探究竟。我已经皈依了。

关于css - 使 CSS 文件中的所有规则仅适用于 id 的后代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21856069/

相关文章:

javascript - 使用 jQuery,我能否定位一个元素以仅在父元素悬停时显示其子元素?

css - z-index 在 IE8 中不工作。为什么?

JQuery 动画到定义的位置

css - 试图将所有 scss 文件编译成一个 css 文件

css - 如何居中 HTML5 视频?

javascript - 在我的网站内打开外部链接

html - 多个媒体查询被忽略

html - 点领导者跨越过多的线

html - 我们可以包含带有 API 的样式表链接作为 href 属性吗?

css - UL 文本菜单 : Inline converted to Block via Media Query - Display Issues