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

Question

好的，所以我找到了 :not 伪元素，并想将一种样式应用于除一个按钮之外的所有活动按钮 class。这是我想出的 CSS decleration 但 Dreamweaver，更重要的是浏览器，不喜欢它并使整个 decleration 无效...

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

我觉得这在逻辑上是有道理的，但是所有这些冒号有什么东西让 CSS 感到困惑吗？

PS。它很重要，因为 'success' class 中的按钮是绝对定位的，并添加此 top: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

当你说 "in the 'success' class" 时，是否意味着你有一个带有 class “success” 的元素和其中的按钮？像这样：

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

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

<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 样式应用于一个按钮的活动状态而不是不同 class 中的其他按钮的正确方法

Correct way to apply CSS style to active state to one button but not other buttons within different class

html

css

css-selectors

pseudo-class