小编Jer*_*myE的帖子

背景:

我在使用Bootstrap 3作为CSS框架创建新项目时尝试使用语义标记,我主要使用less的扩展功能来应用引导程序样式.但是,当我尝试扩展嵌套选择器时,较少的是没有创建我期望的CSS输出.

以下是我遇到的问题的简单示例:

HTML标记:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>    

减

.parent-class{
    parentProperty: value;
    .child-class { parentChildProperty: value; }
}

.child-class {
    childProperty:value;
    & > li{ childLiProperty:value; }
}

nav{
    &:extend(.parent-class all);
    ul{
        &:extend(.child-class all);
    }
}

实际CSS输出:

.parent-class,
nav {
  parentProperty: value;
}
.parent-class .child-class,
nav .child-class,
.parent-class nav ul {
  parentChildProperty: value;
}
.child-class,
nav ul {
  childProperty: value;
}
.child-class > li,
nav ul > li {
  childLiProperty: value;
}

问题

输出的问题是parentChildProperty不会应用于ul元素,因为未生成选择器nav ul …