gpt4 book ai didi

css - 为 div 和所有子节点设置不同的样式表?

转载 作者:行者123 更新时间:2023-11-28 09:50:18 24 4
gpt4 key购买 nike

我想知道是否有可能使 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 上,而不是全局定义。有没有办法做这样的事情?

我想要实现的是对我的代码进行更多的封装。我知道也有伪命名空间之类的可能性,但这太丑陋了,而且仍然不能保证没有冲突……

更新

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

有没有更好的解决方案?

最佳答案

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

尽管如此,考虑到所有因素,您实际上最好还是在一个元素上使用多个类。给一个 div 几个类,你就可以相当体面地组织你的元素。类似于 <div class="parent child grandchildren-1">只会被这个 css 选择:

.parent.child.grandchildren-1 { color:red; }

关于css - 为 div 和所有子节点设置不同的样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14958925/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com