Question

好的，所以我找到了：not pseudo元素，并希望将样式应用于所有活动的按钮，除了另一个类中的一个。这是我提出的CSS解除，但Dreamweaver，更重要的是浏览器，不喜欢它，并使整个decleration无效......

.button:active:not(.success .button:active) {
    position:relative;
    top:4px;
}

看起来对我来说逻辑上是有意义的，但是有什么关于混淆CSS的所有这些冒号吗？

PS。它很重要，因为按钮在“成功”中取得了成功。 class绝对定位，并添加此顶部：4px;拧紧那里的一切。

由于

Answer 1

你在寻找像

这样的东西吗？

.button:not(.success):active {
    position:relative;
    top:4px;
}

作为示例：https://jsfiddle.net/nh4f821y/

.button {
    padding: 10px;
    background: rgba(0,0,0,0.1);
    float: left;
}

.button:not(:last-child){
    margin-right: 10px;
}

.button:not(.success):active {
    background: rgba(0,0,0,0.2);
}

<div class="button success">1</div>
<div class="button success">2</div>
<div class="button">3</div>
<div class="button">4</div>
<div class="button success">5</div>

<p>On click, the background only change for divs <b>3</b> and <b>4</b></p>

祝你好运

Answer 2

当你说“在'成功'类中”时，这是否意味着你有一个带有“success”类的元素及其中的按钮？像这样：

<div class="success">
    <button class="button"></button>
</div>

如果是这样，:not()不是要使用的选择器。解决方案是在按钮上添加另一个类并将样式应用于：

<div class="success">
    <button class="button button-success"></button>
</div>

并在CSS中：

.button:active {
    position: relative;
    top: 4px;
}

.button-success:active {
    position: absolute;
    top: auto;
}

将CSS样式应用于活动状态的正确方法是一个按钮，而不是其他类中的其他按钮

2 个答案: