css - css 3 中是否有任何 css 类分组 css 类？

Question

我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个 div 下，就像在 css 中的媒体查询中一样

=>例如

 #s4-workspace {

   input, button{css style}
   a,a:hover{css style}
   table{css style}
  .div1{css style}
  .div2{css style}
  .div3{css style}

}

---

在css3中是否可行

提前致谢

Answer 1

是否要避免像这样重复 id:

#s4-workspace   input,
#s4-workspace   button,
#s4-workspace   a,
#s4-workspace   a:hover,
#s4-workspace   table,
#s4-workspace  .div1,
#s4-workspace  .div2,
#s4-workspace  .div3 {
  /* */
}

这称为嵌套，不，这在 CSS Level 3 中是不可能的。

不过，任何预处理器都具有此功能，例如 LESS 和 Sass。

编辑:看来您想要生成的 CSS:

#s4-workspace   input,
#s4-workspace   button {
  /* CSS styles 1 */
}
#s4-workspace   a,
#s4-workspace   a:hover {
  /* CSS styles 2 */
}
#s4-workspace   table {
  /* CSS styles 3 */
}
#s4-workspace  .div1 {
  /* CSS styles 4 */
}
#s4-workspace  .div2 {
  /* CSS styles 5 */
}
#s4-workspace  .div3 {
  /* CSS styles 6 */
}

同样的答案:在 CSS Level 3 中不可能，尽管它可以从 .less 或 .scss 文件编译(这与您的代码示例非常相似).这 2 个预处理器允许嵌套作为其基本功能之一。

• > LESS nested rules
• > Sass nesting