CSS选择器范围

Question

我们假设我们有这个代码：

<section id="block">
  <p>Some Text</p>
  <p class="test">Some Text With Class 'test'</p>
  <p>Some More Text</p>
</section>

<p>Some Text</p>
<p class="test">Some Text With Class 'test'</p>
<p>Some More Text</p>

所以我想在<p> 内<p class="test">和<section id="block">设置>。

此CSS可用于执行此操作：

#id p {
  ...
}

#id .test {
  ...
}

但是我觉得如果像#my-very-long-id这样的长ID会有点分散注意力。

实现此目标的另一种方法是使用<style scoped></style>标记。

但是在HTML中使用CSS代码并不是很方便，而且大多数浏览器都不支持它（如caniuse.com所说）。

我的问题：有没有办法在 CSS中声明某种选择器范围？

拥有这样的东西会很酷：

@scope(#id) {
  p {
    /* ... */
  }

  .test {
    /* ... */
  }
}

Answer 1

你可以去http://sass-lang.com/guide 这可能会对你有帮助！

Answer 2

你可以这样做：

#id {
  p {
    /* ... */
  }

  .test {
    /* ... */
  }
}

仅限LESS或SASS，而不是css。

为什么不做

#id > p{ your style }

所以id里面的每个p都会采用那种风格。对于类.test的更多aditional样式，你可以声明它是分开的。