如何从伪 class 中找到 class

Question

我试图从伪 class 中找到一个 class 来改变属性取决于它有哪个 class （默认或反转）。

少

.callout {
    position: relative;
    float: left;
    padding: 20px;
    &.default {
        background: #f0f0f0;
        color: #333333;
    }
    &.invert {
        background: #333333;
        color: #f0f0f0;
    }
    &.right {
        float: right;
        &:after {
            right: 100%;
            top: 30px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            border-width: 19px 19px 0px 30px;
            margin-top: -20px;

            //This is working now but can I change border-right-color depend on which class it has, default or invert.
            border-right-color: red;

            //This is the area I am struggling...
            .default & {
                border-right-color: #f0f0f0;
            }
            .invert & {
                border-right-color: #333333;
            }

        }

    }
}

HTML

<div class="callout invert right">This is callout text... </div>

JS Fiddle

https://jsfiddle.net/kunjsharma/La68gnx7/2/

Answer 1

谢谢@seven-phases-max，这是您的笔代码。解决方案是：当 space 从 .class 和 & 中删除时（例如：.invert&），它有效。

HTML

<div class="callout right">I am just .right</div>
<div class="callout right default">I am also .default</div>
<div class="callout right invert">And I am .invert</div>

少

.callout {
    position: relative;
    float: left;
    clear: both;
    padding: 20px;
    &.default {
        background: #f0f0f0;
        color: #333333;
    }
    &.invert {
        background: #333333;
        color: #f0f0f0;
    }
    &.right {
        float: right;
        &:after {
            right: 100%;
            top: 30px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            border-width: 19px 19px 0px 30px;
            margin-top: -20px;

            border-right-color: red;

            .default& {
                border-right-color: green;
            }
            .invert& {
                border-right-color: blue;
            }

        }

    }
}

如何从伪 class 中找到 class

How to find class from inside pseudo class

html

css

less