Question

给定一个css文件，是否有办法对整个文件进行范围调整，使其仅适用于给定元素中的元素：

e.g。给出：

<div id="container">
   <span class="some_element"/>
   <!-- etc -->
</div>

有没有办法将整个css文件的范围应用于“容器”中的所有元素，而不必将#container添加到每个css子句中？

Answer 1

我不敢。一些CSS预处理器允许您编写实现相同功能的代码。

E.g。 LESS实现嵌套规则：

/* This LESS code... */

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* ...produces this CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

而且Andy提到了SASS，它做了同样的事情。

Answer 2

您可以在scoped元素上使用<style>属性，但几乎没有浏览器支持。在您的示例中：

<div id="container">
    <style scoped>.some_element{}</style>
    <span class="some_element"></span>
</div>

这是一个jQuery Polyfill：http://thingsinjars.com/post/360/scoped-style/

Answer 3

有两种方法可以解决这个问题：

1）在HTML5中，（尚未广泛支持），您可以在scoped标记上添加<style>属性。 Here是关于此主题的简短文章。

2）您可以使用动态样式表语言（如LESS或SASS），它允许您将相关的CSS规则嵌套在一起。

Answer 4

不单独使用CSS，但可以使用编译成CSS的Sass。

Answer 5

您可以使用BEM命名表示法 - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/（“块，元素，修饰符”）。

你的例子将成为：

<div id="container">
   <span class="container__some_element"/>
   <!-- etc -->
</div>

是的，如果你不使用缩写，你在CSS中写的字符数相同......但你的样式会少specificity - 这可能是有益的。

希望未来几年对<style scoped>的浏览器支持会更好！

Answer 6

你可以用php加载页面并动态地抛出你想要的任何标签，或者用javascript / jQuery做同样的事情......尽管那是相当笨拙的。由于CSS始终应用于整个页面，因此没有内置方法可以执行此操作。

您可以将CSS文件作为范围，以便它们仅适用于给定元素的后代吗？

6 个答案: