使用＆符号来定位父选择器

Question

我阅读了一些与号主题，但找不到解决我的问题的方法。这是我要实现的输出 CSS：

CSS

.box-item__info--normal,
.box-item__info--left {
    padding-left: 11px;
    padding-right: 11px;
}
.box-item__info--normal h4,
.box-item__info--left h4 {
    font-size: 1.5em;
}
.box-item__info--normal .item-price {
    float: right;
}

然后，我写了这个 LESS 语法：

.box-item{
    &__info{
        position: relative;
        padding: 35px 0 15px 0;

        &--normal, &--left{
            padding-left: 11px;
            padding-right: 11px;

            h4{
                font-size: @delta;
            }

            & , & .item-price{
                float: right;
            }
        }

        &--left{
            padding-top: 20px;

            h4{
                margin-bottom: 10px;
            }
        }
    }
}

将产生：

.box-item__info--normal,
.box-item__info--left {
    padding-left: 11px;
    padding-right: 11px;
}
.box-item__info--normal h4,
.box-item__info--left h4 {
    font-size: 1.5em;
}
.box-item__info--normal,
.box-item__info--left,
.box-item__info--normal .item-price,
.box-item__info--left .item-price {
    float: right;
}

如何使这段代码按预期工作？

Answer 1

此 Less 代码将实现您正在寻找的内容：

.box-item{
    &__info{

        &--normal, &--left{
            padding-left: 11px;
            padding-right: 11px;

            h4{
                font-size: 1.5em;
            }
        }

        &--normal{
            & .item-price{
                float: right;
            }
        }
    }
}

您无法使用双重规则 &--normal, &--left{..} 实现最后一条规则，因为这也会影响 .box-item__info--left .item-price

使用＆符号来定位父选择器

Use ampersand to targets parent selectors

html

css

less