CSS 中的命名空间/作用域
我想将 CSS 文件中的规则应用于某个 div/类,因此,例如 events.css 的内容仅应用于名为 .events 的类的内容,而不是在此范围之外,无需添加class .events 添加到每个 css 规则的开头。
我认为这是不可能的——但你永远不知道。
如果不是,我正在考虑通过在上传/编辑后将 .events 添加到 CSS 规则中来实现相同的效果。我认为这应该是相当没有问题的,但是有人预见到任何问题吗?
I want to apply the rules in a CSS file to a certain div/class so, for example, the contents of events.css is only applied to the contents of a class called .events and not outside this scope without the need to add the class .events to the start of each css rule.
I am thinking this is not possible though - but you never know.
If not I am thinking of achieving the same effect by prefixing the .events to the CSS rules after they have been uploaded/edited. I am thinking this should be fairly trouble-free, but does anyone forsee any problems?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
确实是不可能的。除非您将相关内容放入 iframe 中。然后,您将获得一个完整的独立文档,以不同的方式进行样式设置。
以自动化的方式?您需要能够解析 CSS 输入以确定选择器的开头位置。
这并不像您想象的那样简单:这
是一个很难解析 CSS 的示例。
.eggs
、.bacon
和.potato
开始选择器,并且需要.events
前缀。.sausage
和.beans
不是。Indeed. Unless you put the content in question in an iframe. Then you get a whole separate document to style differently.
In an automated fashion? You would need to be able to parse the CSS input to determine where the beginnings of the selectors were.
This is not as trivial as you might think to do correctly:
is an example of tricky-to-parse CSS.
.eggs
,.bacon
and.potato
begin selectors and would want a.events
prefix..sausage
and.beans
are not.这是唯一的方法,而且应该没问题。
That's the only way to do it and should be fine.
从维护的角度来看,在 CSS 规则中简单地包含“.event”会更安全。几个月后,您可能已经忘记了在这里为节省一点打字而玩过的技巧。
It is safer from a maintenance standpoint to simply include ".event" in your CSS rules. Several months down the road, you may have forgotten the tricks you played here to save a little bit of typing.
简而言之,唯一的方法是为每个规则添加
.events
前缀。但我会避免自动执行此操作,因为很容易犯错误,例如手动将
.events
添加到规则中,这会使错误加倍。如果您想跨页面共享某些样式,例如.events.special
和.aboutus.special
,那么您需要将它们放在其他地方。通常最好使用一个样式表,而不是每个部分使用一个样式表,这样用户在转到后续页面时就会将其缓存。 (您可以在生产环境中对其进行压缩和压缩,以减少初始下载时间。)
In short, the only way is to prefix each rule with
.events
.But I would steer away from doing that automatically, because it's easy to make mistakes, like adding
.events
to a rule manually, which would double it up. And if you wanted to share some styles across pages, like.events.special
and.aboutus.special
then you'd need to put them somewhere else.It's generally better to use one stylesheet instead of one per section, so the user will have it cached when they go to subsequent pages. (You can minify and gzip it in the production environment to reduce initial download time.)
我会将“.events”类添加到选择器中。作为手动过程执行此操作存在人为错误的风险。这是一种部分自动化向所有 CSS 类添加选择器的过程的方法。
或者,您可以使用这个 自动前缀,但它似乎不能很好地处理选择器之间的空格。
I would add the class '.events' to the selectors. There is the risk of human error doing this as a manual process. Here is a way of partially automating the process of adding a selector to all CSS classes.
Alternatively you could use this automatic prefixer, but it doesn't seem to handle spaces between your selectors well.