选择器嵌套
li {
height: 10px;
a{
height: 5px;
}
}
//css style
li{
height: 10px;
}
li a {
height: 5px;
}
选择器嵌套中，用&表示父元素选择器。
属性嵌套
div {
border: {
left: {
width: 2px;
color: #fff;
}
right: {
width: 2px;
color: #ccc;
}
}
}
//css style
div {
border-left-width: 2px;
border-left-color: #fff;
border-right-width: 2px;
border-right-color: #ccc;
}
@at-root跳出
@at-root(without: ...)语法关键词有四个：all(表示所有),rule(常规，默认可不写), media(表示media),support(表示support)
@media print {
.parent1 {
color: #fff;
@at-root .child1 {
color: #ccc;
}
}
}
@media print {
.parent2 {
color: #fff;
@at-root(without:media) {
.child2 {
color: #ccc;
}
}
}
}
@media print {
.parent3 {
color: #fff;
@at-root(without:all) {
.child3 {
color: #ccc;
}
}
}
}
// css style
@media print {
.parent1 {
color: #fff;
}
.child1 {
color: #ccc;
}
}
@media print {
.parent2 {
color: #fff;
}
}
.parent2 .child2 {
color: #ccc;
}
@media print {
.parent3 {
color: #fff;
}
}
.child3 {
color: #ccc;
}