求助：CSS选中按钮样式无法保留，Hover生效但Active伪类无效果

Hey there, let's dig into why your button's active state isn't working as expected—let's break this down step by step.

First: Understand what :active actually does #

The :active pseudo-class only applies while the element is being clicked (mouse button held down). As soon as you release the mouse, the state disappears. If you're trying to keep the button highlighted after clicking it, :active isn't the right tool for the job—you'll need to use :focus or a custom class (like .is-active) instead.

Second: Check your selector matching #

Looking at your code, there's a key difference between the hover and active selectors for one of your elements:

• Hover uses [id*='AddProgramDailyAdmissionToCart'] (matches any element whose ID contains that string)
• Active uses [id='AddProgramDailyAdmissionToCart'] (only matches elements with an exact ID match)

If your button's ID is dynamically generated (e.g., AddProgramDailyAdmissionToCart_123 with a suffix), the active selector won't find it—this is almost certainly why that part of your code isn't working.

Fixes to Try #

1. Align your active selector with the hover selector #

Update the active rule to use the same *= matching as hover, so it targets the same elements:

body .btn:active, 
body .MS_contentWrapper_inner .PaymentPartSubmitButton:active, 
body .MS_contentWrapper_inner [id*='AddProgramDailyAdmissionToCart']:active, /* Changed to *= */
input[type="submit"]:active, 
.BBFormSubmitButton:active, 
#anchorOtherDates:active, 
#anchorOtherTimes:active, 
.Programming_Event_AlternateDatesCaption:active, 
.Programming_Event_AlternateTimesCaption:active { 
    background: #E77229 !important; 
    color: #fff; 
    text-decoration: none; 
    border: none !important; 
}

2. If you want a "sticky" selected state #

If you need the button to stay highlighted after clicking, use one of these approaches:

Option A: Use :focus (for form/interactive elements)

:focus keeps the style applied until the user clicks elsewhere on the page. Add this rule alongside or instead of your active rule:

body .btn:focus, 
body .MS_contentWrapper_inner .PaymentPartSubmitButton:focus, 
body .MS_contentWrapper_inner [id*='AddProgramDailyAdmissionToCart']:focus, 
input[type="submit"]:focus, 
.BBFormSubmitButton:focus, 
#anchorOtherDates:focus, 
#anchorOtherTimes:focus, 
.Programming_Event_AlternateDatesCaption:focus, 
.Programming_Event_AlternateTimesCaption:focus { 
    background: #E77229 !important; 
    color: #fff; 
    text-decoration: none; 
    border: none !important; 
    outline: none; /* Optional: Remove default focus outline */
}

Option B: Use a custom class (for persistent state)

For full control over when the state stays active, add a custom class and toggle it with JavaScript:

/* Custom active state class */
body .btn.is-active, 
body .MS_contentWrapper_inner .PaymentPartSubmitButton.is-active, 
body .MS_contentWrapper_inner [id*='AddProgramDailyAdmissionToCart'].is-active, 
input[type="submit"].is-active, 
.BBFormSubmitButton.is-active, 
#anchorOtherDates.is-active, 
#anchorOtherTimes.is-active, 
.Programming_Event_AlternateDatesCaption.is-active, 
.Programming_Event_AlternateTimesCaption.is-active { 
    background: #E77229 !important; 
    color: #fff; 
    text-decoration: none; 
    border: none !important; 
}

Add this JavaScript to toggle the class on click:

// Target all your buttons and bind click events
document.querySelectorAll('.btn, .PaymentPartSubmitButton, [id*="AddProgramDailyAdmissionToCart"], input[type="submit"], .BBFormSubmitButton, #anchorOtherDates, #anchorOtherTimes, .Programming_Event_AlternateDatesCaption, .Programming_Event_AlternateTimesCaption').forEach(btn => {
    btn.addEventListener('click', function() {
        // Optional: Uncomment below to make it a "radio" style (only one active at a time)
        // document.querySelectorAll('.is-active').forEach(el => el.classList.remove('is-active'));
        this.classList.toggle('is-active'); // Toggle the active state on the clicked button
    });
});

Quick Extra Checks #

• Make sure your elements are interactive: <a> tags need an href attribute, and buttons should be <button> or input[type="submit"] for :active to work properly.
• Use browser dev tools (F12) to inspect the element: Check if your active style is being crossed out—if so, another CSS rule with higher specificity is overriding it. You can adjust your selector weight or confirm !important is applied correctly.

内容的提问来源于stack exchange，提问作者Josh Hall