如何为同一class的多个实例元素设置不同CSS属性？

你的CSS选择器不生效通常是两种场景导致的，对应不同的解决方案：

1. 全局CSS场景（未使用CSS Modules） #

你的代码逻辑本身没问题，先排查这几个点：

• 确认CSS文件已正确引入到页面/组件中，比如React项目里有没有加import './你的样式文件.css';
• 打开浏览器开发者工具（F12），选中第一个.text元素，查看「样式」面板：如果你的规则被划掉，说明有更高优先级的样式覆盖；如果规则没显示，说明CSS没引入或选择器匹配错误
• 检查父容器.options里是否真的只有这三个.text子元素，有没有额外的DOM元素（比如隐藏的span、script标签）——如果有，:nth-child()会把这些元素算入计数，导致选择器匹配错位

确认没问题后，你的原始代码就能生效：

.options > .text:first-child {
    font-size: 12px;
}
.options > .text:nth-child(2) {
    font-size: 21px;
}
.options > .text:nth-child(3) {
    font-size: 26px;
}

2. CSS Modules场景（比如Create React App默认的局部样式） #

这种场景下类名会被编译成带哈希的局部名称，直接写.options > .text会匹配不到，有两种解决方式：

方式一：用局部类名组合 #

JSX里使用样式对象的类名：

import styles from './你的样式文件.module.css';

<div className={styles.options}>
   <div className={styles.text}>One</div>
   <div className={styles.text}>Two</div>
   <div className={styles.text}>Three</div>
</div>

CSS里保持你的写法即可：

.options > .text:nth-child(1) {
    font-size: 12px;
}
.options > .text:nth-child(2) {
    font-size: 21px;
}
.options > .text:nth-child(3) {
    font-size: 26px;
}

方式二：把.text设为全局类名 #

如果想保留.text的全局类名，在CSS里用:global()包裹：

.options > :global(.text):nth-child(1) {
    font-size: 12px;
}
.options > :global(.text):nth-child(2) {
    font-size: 21px;
}
.options > :global(.text):nth-child(3) {
    font-size: 26px;
}

此时JSX里的className直接写'text'即可。

备选方案：用:nth-of-type更稳妥 #

如果父容器可能混入其他类型元素，用:nth-of-type()只针对同类型子元素计数，避免匹配错误：

.options > div.text:nth-of-type(1) {
    font-size: 12px;
}
.options > div.text:nth-of-type(2) {
    font-size: 21px;
}
.options > div.text:nth-of-type(3) {
    font-size: 26px;
}

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