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

问题

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;
}

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

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

Thanks

回答1:

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>

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>

and in the CSS:

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

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

回答2:

Are you looking for something like

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

as example: 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>

Good Luck'

来源：https://stackoverflow.com/questions/31747104/correct-way-to-apply-css-style-to-active-state-to-one-button-but-not-other-butto

标签

html

css

css-selectors

pseudo-class