如何从伪类内部查找类

Question

我正在尝试从伪类内部查找一个类，以根据其具有的类（默认或取反）来更改属性。

少

.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小提琴

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

Answer 1

感谢@ seven-phases-max，这是您的笔代码。解决方案是：当从.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;
            }

        }

    }
}