如何为两个相同类选择合适名称？求助CSS单独编辑两类元素的方法

Hey there! Let's break down your two front-end styling issues step by step—these are super common pain points, so you're definitely not alone here.

1. Naming Similar Classes Effectively #

When you have two elements that share core styles but need distinct variations, the goal is to use semantic, descriptive names instead of generic labels like .item1 or .box2. Here are practical, industry-standard approaches:

• Function-based naming: Name classes based on what the element does or represents. For example:
  • For two buttons, use .btn-submit and .btn-cancel instead of .btn-a/.btn-b
  • For two card components, go with .card-product and .card-testimonial
• BEM Methodology: This system clarifies relationships between base components and their variations. For a base .card block, add modifiers for unique styles:

  .card { /* Shared card styles: padding, border, font size */ }
  .card--featured { /* Unique styles: darker border, larger headline */ }
  .card--compact { /* Unique styles: smaller padding, condensed text */ }
  

• State-based naming: If the difference comes down to interaction state (e.g., active vs. inactive), pair a shared class with state-specific ones like .tab + .tab-active/.tab-inactive.

2. Targeting Similar Elements Separately in CSS #

Once you have meaningful class names, here are reliable ways to style them individually:

Add a Modifier Class #

The most straightforward method is to keep the shared class and add an extra modifier class to one element:

<!-- Shared class + unique modifier -->
<div class="box box-primary"></div>
<div class="box box-secondary"></div>

/* Shared styles for all boxes */
.box {
  width: 200px;
  padding: 1rem;
  border: 1px solid #eee;
}

/* Unique styles for primary box */
.box-primary {
  background-color: #4285F4;
  color: white;
}

/* Unique styles for secondary box */
.box-secondary {
  background-color: #34A853;
  color: white;
}

Use Parent Context #

If the elements live inside different parent containers, use the parent's class as a qualifier to target them:

<div class="header-section">
  <div class="box"></div>
</div>
<div class="footer-section">
  <div class="box"></div>
</div>

/* Box inside the header */
.header-section .box {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Box inside the footer */
.footer-section .box {
  border-radius: 0;
  border-color: #ddd;
}

Use Structural Pseudo-Classes #

If the elements are siblings in the same container, use :nth-child() or :nth-of-type() to target specific positions:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

/* Target the first box in the container */
.container .box:nth-child(1) {
  margin-right: 1rem;
}

/* Target the second box in the container */
.container .box:nth-child(2) {
  margin-left: 1rem;
}

Attribute Selectors (For Edge Cases) #

If you can't modify the HTML, use attribute selectors if the elements have unique attributes (like data-* or specific class combinations):

/* Target element with both .box and data-type="primary" */
.box[data-type="primary"] {
  border-width: 2px;
}

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