如何通过CSS的nth-child为不同仪表盘单独设置环形进度条数值

Got it, let's sort this out! The issue right now is that your CSS targets all second circles with the same 75% progress. To fix this, we'll use the :nth-child() selector to target each individual .box container first, then adjust the progress for its inner ring. Here's how to implement it:

Step 1: Keep Your Base CSS #

First, retain the core styles that apply to all progress rings—this ensures consistency across all dashboards:

/* Base styles for all progress rings */
.box .percent svg circle {
  width: 150px;
  height: 150px;
  fill: none;
  stroke-width: 10;
  stroke: #000;
  transform: translate(5px,5px);
  stroke-linecap: round;
  stroke-dasharray: 440; /* Total length of the ring */
  stroke-dashoffset: 440; /* Starts fully hidden */
}

/* Gray background ring for all dashboards */
.box .percent svg circle:nth-child(1) {
  stroke-dashoffset: 0;
  stroke: #f3f3f3;
}

Step 2: Target Individual Dashboards with :nth-child() #

Use .box:nth-child(n) to target the nth dashboard, then override the stroke-dashoffset for its active progress circle. The formula for progress is:
stroke-dashoffset: calc(440 - (440 * [YOUR_PERCENTAGE])/100)

Here's an example with 3 dashboards having distinct progress values:

/* Dashboard 1: 87% progress */
.box:nth-child(1) .percent svg circle:nth-child(2) {
  stroke-dashoffset: calc(440 - (440 * 87)/100);
  stroke: #03a9f4; /* Blue for this dashboard */
}

/* Dashboard 2: 65% progress */
.box:nth-child(2) .percent svg circle:nth-child(2) {
  stroke-dashoffset: calc(440 - (440 * 65)/100);
  stroke: #4caf50; /* Green for this dashboard */
}

/* Dashboard 3: 92% progress */
.box:nth-child(3) .percent svg circle:nth-child(2) {
  stroke-dashoffset: calc(440 - (440 * 92)/100);
  stroke: #ff9800; /* Orange for this dashboard */
}

Step 3: Update Your HTML (Multiple Dashboards) #

Ensure all your dashboard .box elements are siblings (share the same parent container) so :nth-child() works correctly:

<!-- Parent container for all dashboards -->
<div class="dashboard-container">
  <div class="box">
    <div class="percent">
      <svg>
        <circle cx="70" cy="70" r="70"></circle>
        <circle cx="70" cy="70" r="70"></circle>
      </svg>
      <div class="number">
        <h2>87<span>%</span></h2>
      </div>
    </div>
    <h2 class="text">Dashboard 1</h2>
  </div>

  <div class="box">
    <div class="percent">
      <svg>
        <circle cx="70" cy="70" r="70"></circle>
        <circle cx="70" cy="70" r="70"></circle>
      </svg>
      <div class="number">
        <h2>65<span>%</span></h2>
      </div>
    </div>
    <h2 class="text">Dashboard 2</h2>
  </div>

  <div class="box">
    <div class="percent">
      <svg>
        <circle cx="70" cy="70" r="70"></circle>
        <circle cx="70" cy="70" r="70"></circle>
      </svg>
      <div class="number">
        <h2>92<span>%</span></h2>
      </div>
    </div>
    <h2 class="text">Dashboard 3</h2>
  </div>
</div>

Key Notes #

• Sibling Requirement: All .box elements must be direct siblings (same parent) for :nth-child() to target them correctly. If they're nested inside other elements, adjust the selector to match your HTML structure (e.g., .dashboard-container > .box:nth-child(1)).
• Progress Calculation: The 440 value comes from your stroke-dasharray—if you ever change that, update the calculation to match the new total length.
• Customization: Feel free to adjust the stroke color for each dashboard to make them visually distinct, as I did in the example.

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