Html 使用符号AND返回到父选择器？

我用更少的时间来写CSS，这为我节省了很多时间。现在我有一个小问题，下面是我的代码：

<a href="#" class="btn-black-bg btn-right-skew">largest fight gym in Australia</a>

现在我的目标是如果

btn黑色背景

那么

btn右倾斜

也有黑色背景。在CSS中，我可以处理以下代码：

.btn-black-bg.btn-right-skew:after{
    background: #000;
}

---

但我不知道如何在更少的时间内做到这一点。希望每个人都能帮助我。

基于您的HTML，在

中添加
背景：#000
。btn black bg:after

（两个类中的一个）就足够了，但我假设您只想在两个类都位于同一元素上时应用某些属性。为此，您可以使用如下所示的父选择器：

.btn {
    &-black-bg&-right-skew:after {
        background: #000;
        color: #fff;
    }
}

---

您不能将其嵌套到

&-black bg

或

&-right skew

（因为类的顺序在CSS中并不重要）并使用父选择器，因为父选择器总是引用完整的父级，而不仅仅是直接的父级。嵌套可以做到的最好方法如下，但需要将

.btn

静态添加到最里面的选择器，而不是使用

&

.btn {
    &-black-bg {
        &.btn-right-skew:after {
            background: #000;
            color: #fff;
        }
    }
}

---

您可以使用变量来实现嵌套，但我不建议将其用于您的场景，因为上面给出的选择器更简单易读。

我建议将类别分为基类“btn”和修改器类“black bg”和“right skew”。（在我看来，这使我们更容易理解应用了什么以及如何组合。）

请参见代码笔上的我的AxSample：

---

@泰洪：还是一样。您可以将

：添加到选择器的
之后。@seven phases max:这是新版本中的一些更改吗？在旧版本（1.7.x）中，如果中间包含
，则会抛出错误。没有它也行。是的，哈利是对的。如果我把
再问一个问题，它会抛出一个错误，我能把这个代码放进
&-black bg
吗？@TheHung:我刚才在编辑它。答案是，由于父选择器的工作方式，您无法将其嵌套。如果需要，你可以使用变量，但我会说这更具可读性。@Harry，没有。对不起，那是我的错误-我正要恢复我的更改，但后来我意识到你可能在同一时间编辑了它，所以我退出了。
.btn {
    &-black-bg {
        &.btn-right-skew:after {
            background: #000;
            color: #fff;
        }
    }
}

<a href="#" class="btn black-bg right-skew">largest fight gym in Australia</a><br /><a href="#" class="btn green-bg right-skew">largest fight gym in Australia</a>

    .btn {
    display: inline-block; // added to let the padding affect the height
    position: relative;
    padding: 15px 22px;
    color: @color-black;

    &.black-bg{
        background: @color-black;
        color: @color-white;
    }
    &.green-bg{
        background: @color-green;
        color: @color-white;
    }

    &.right-skew{
        position: relative;

      &.black-bg { // combine both classes = .right-skew.black-bg
        &:after {
          background: @color-black;
        }
      }
      &.green-bg:after { // or short form
          background: @color-green;
      }
        &:after {
            content: '';
          display: block; // was missing;
            position: absolute;
            right: -10px;
            top: 0px;
            width: 20px;
            height: 100%;
            transform: skewX(-15deg); // changed to make it work in the example on codepen
        }
    }
}