将CSS样式应用于活动状态的正确方法应用于一个按钮，而不适用于不同类中的其他按钮 [英] Correct way to apply CSS style to active state to one button but not other buttons within different class

问题描述

好的，所以我找到了:not伪元素，并想将一种样式应用于除另一个类中的一个以外处于活动状态的所有按钮.这是我想出的CSS缺陷，但Dreamweaver(更重要的是浏览器)不喜欢它，并使整个缺陷消失了.

OK so I found the :not pseudo element and wanted to apply a style to all buttons that are active EXCEPT one within another class. This is the CSS decleration I came up with but Dreamweaver, and more importantly the browser, does not like it and voids the whole decleration...

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

从逻辑上来说，这对我来说似乎很有意义，但是所有这些冒号是否会使CSS感到困惑?

It looks like it makes sense to me logically but is there something about all these colons which confuses CSS?

PS.这很重要，因为成功"类中的按钮是绝对定位的，并添加以下top:4px;.将所有东西都拧紧.

PS. Its important because the button in the 'success' class is absolutely positioned, and adding this top:4px; screws everything up there.

谢谢

推荐答案

当您说在'成功'类中"时，是否表示您具有一个元素，该元素的类为"success"，并且其中的按钮是?像这样:

When you say "in the 'success' class", does that mean that you have an element with the class "success" and the button inside it? Something like this:

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

如果是，则:not()不是要使用的选择器.解决方案是在按钮上添加另一个类，然后将您的样式应用于该类:

If so, :not() is not the selector to use. The solution is to add another class onto the button and apply your styles to that:

<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样式应用于活动状态的正确方法应用于一个按钮，而不适用于不同类中的其他按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！