如何为多个不同段落设置不同颜色及独立CSS样式？

Hey there! Great question—styling individual paragraphs with unique colors or styles is totally doable in CSS, and there are a few straightforward ways to go about it depending on your needs. Let’s break this down with your example code.

Method 1: Using CSS Classes (Most Flexible & Reusable) #

This is the go-to approach because classes let you apply styles to any element and reuse them across your site.

First, add a unique class to each <p> tag in your HTML:

<p class="paragraph-one">This is a sentence.</p>
<p class="paragraph-two">This is another sentence.</p>
<p class="paragraph-three">If you had a third one, here's how to mark it.</p>

Then define each class in your CSS with whatever styles you want—colors, fonts, margins, etc.:

.paragraph-one {
  color: #2ecc71; /* Green */
  font-weight: bold;
}

.paragraph-two {
  color: #3498db; /* Blue */
  font-style: italic;
}

.paragraph-three {
  color: #e74c3c; /* Red */
  text-decoration: underline;
}

Method 2: Using nth-child Selectors (No HTML Changes Needed) #

If you don’t want to modify your HTML (maybe it’s generated content), you can target paragraphs based on their position inside a parent container using nth-child.

Suppose your paragraphs are wrapped in a container:

<div class="paragraph-container">
  <p>This is a sentence.</p>
  <p>This is another sentence.</p>
  <p>A third paragraph here.</p>
</div>

Then style them directly in CSS without editing the HTML:

.paragraph-container p:nth-child(1) {
  color: #f39c12; /* Orange */
}

.paragraph-container p:nth-child(2) {
  color: #9b59b6; /* Purple */
}

.paragraph-container p:nth-child(3) {
  color: #1abc9c; /* Teal */
}

Note: This relies on the order of paragraphs—if you reorder them, the styles will shift too.

Method 3: Using IDs (For One-Off Elements) #

If you only need to style a paragraph once and never reuse the style, use an ID (each ID is unique to one element per page).

HTML:

<p id="intro-paragraph">This is a sentence.</p>
<p id="main-paragraph">This is another sentence.</p>

CSS:

#intro-paragraph {
  color: #000000; /* Black */
  font-size: 1.2rem;
}

#main-paragraph {
  color: #666666; /* Gray */
  line-height: 1.5;
}

All these methods work perfectly for setting different colors or independent styles for 2-4 paragraphs. Classes are usually the best choice for most cases because of their flexibility, but pick whichever fits your specific situation!

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