3

我想知道是否有可能让 div 忽略文档中的所有 css 规则，而是为自己及其所有子节点使用不同的样式表。

一个小例子：

<html>
    <head>
        <style>
            div{color:red}
        </style>
    </head>
    <body>
        <div>This is red text</div>
        <div stylesheet="/path/to/my/stylesheet.css">
            This is text in a color defined in the other stylesheet
            <div>This is also not red</div>
        </div>
    </body>
</html>

如您所见，我想直接在 div 上定义样式表，而不是全局定义。有没有办法做这样的事情？

我想要实现的是对我的代码的更多封装。我知道还有像伪命名空间这样的可能性，但这很丑陋，仍然不能保证没有冲突......

更新

与此同时，我发现了样式元素的“作用域”属性，它的作用与我所要求的非常相似。但是几乎没有浏览器支持它。

有更好的解决方案吗？

4

1 回答 1

3

<style scoped>如果没有属性，您将无法执行此操作。而且，正如你所说，这是非常不受支持的。这是 GitHub 上用于范围样式的 jQuery 插件，它推动了对更多浏览器的支持。您还可以@import other-stylesheet.css使用此 jQuery 插件在您的范围样式定义中。

尽管如此，考虑到所有因素，在一个元素上使用多个类实际上可能会更好。给一个 div 上几个类，你就可以相当体面地组织你的项目。类似的东西<div class="parent child grandchildren-1">只会被这个css选择：

.parent.child.grandchildren-1 { color:red; }
于 2013-02-19T14:28:03.043 回答