Question

抱歉，但这对我来说很困惑，有人知道这是可能的还是不可能......

#divp {
   background-color: lightgrey;
  .odiv {
      background-color: yellow;
      .pp  { background-color: black;   }
      a { color:red; }
   }
   .pp { background-color: lightgreen;  }
   a { color:blue; }
}

#divw {
   background-color: lightblue;
  .odiv {
      background-color: blue;
      .pp  { background-color: white;   }
      a { color:yellow; }
   }
   .pp { background-color: green;  }
   a { color:lightblue; }
}

我想创建具有内部css规则的div，我不想一直写同样的.....如

#diw .odiv .pp { background-color: white }
#diw .odiv .a { color: white }
#diw .odiv .other { color: blue }

有可能吗？

Answer 1

无法嵌套选择器，但您可能需要签出CSS预处理器，这样您就可以执行此操作。例如http://lesscss.org/。

Answer 2

标准CSS无法实现。但是在Sass（和其他CSS预处理器）中有可能：http://sass-lang.com/guide#3

它与您在问题中发布的完全相同：

.div1{
  background-color: red;
  p{ font-size: 18px; }
}

将输出：

.div1{ background-color: red }
.div1 p{ font-size: 18px; }

查看http://sassmeister.com/了解Sass的方法。

它可能在另一个选择器内的css选择器

2 个答案: