Magento技术问询：如何在自定义CSS文件中覆写指定CSS类

Got it, let's break down how to successfully override the styles for your "Request More Info" button in specific scenarios using your custom custom.css file. Here's a step-by-step approach:

1. Ensure Your Custom CSS Loads After main.css #

First, double-check the order in your app\design\frontend\theme\default\layout\page.xml file. CSS applies styles in the order it's loaded—so your custom.css needs to come after the main.css entry to have higher priority.

Your layout code should look something like this (verify the placement):

<!-- Load the original main.css first -->
<action method="addItem"><type>skin_css</type><name>css/main.css</name></action>
<!-- Then load your custom.css to override styles -->
<action method="addItem"><type>skin_css</type><name>css/custom.css</name></action>

2. Target Specific Scenarios with Custom Selectors #

Now, write your override styles in skin\frontend\theme\default\css\custom.css by targeting the exact scenarios you need. Here are common examples:

Scenario 1: Button in a Specific Page Section #

If you only want to change the button when it's inside a particular page block (e.g., a product listing section with a class like featured-products):

/* Target the button only within the featured-products section */
.featured-products .plp-description-request-btn {
  background-color: #2563eb; /* Custom blue background */
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

Scenario 2: Hover/Active States #

To modify the button's appearance when a user hovers over it or clicks it:

/* Hover state */
.plp-description-request-btn:hover {
  background-color: #1d4ed8;
  text-decoration: none; /* Remove underline if present */
}

/* Active (clicked) state */
.plp-description-request-btn:active {
  transform: translateY(1px); /* Subtle press effect */
}

Scenario 3: Button on a Specific Page Type #

If you need to style the button differently on a specific page (e.g., a category page where the <body> tag has a class like category-view):

/* Target button only on category pages */
.category-view .plp-description-request-btn {
  font-size: 14px;
  border: 2px solid #2563eb;
}

3. Boost Specificity if Needed #

If the original styles from main.css aren't being overridden, it's likely because the original selector has higher specificity. You can fix this by making your selector more specific:

/* More specific selector (combines body class + button class) */
body .plp-description-request-btn {
  color: white !important; /* Use !important only as a last resort */
}

Pro tip: Avoid using !important unless absolutely necessary—prefer increasing selector specificity instead (e.g., adding parent classes) to keep your CSS maintainable.

4. Verify the Changes #

After saving your custom.css file, clear your browser cache (press Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac) to see the updated styles. Test each scenario to ensure the overrides are working as expected.

内容的提问来源于stack exchange，提问作者stack200 s