Shopify店铺CSS定位label类内特定元素问题：如何将第二个eraser_text span字体设为红色

我来帮你搞定这个CSS样式的问题！你之前的代码没生效主要是选择器的写法有误，咱们一步步修正：

问题分析 #

你的HTML结构里有3个同级的label.selectorv2元素，每个对应一个产品变体，每个label内部都包含一个.eraser_text span。你的需求是仅把第二个变体对应的这个span字体改成红色。

你之前代码的错误点 #

1. 类选择器缺失.：所有类名前必须加.才能被CSS识别，比如selectorv2要写成.selectorv2，sn_ys要写成.sn_ys，你之前的代码都漏掉了这个关键符号。
2. 层级关系与选择器逻辑错误：你尝试的属性选择器label[for="xxx"]硬编码了ID值，不仅不够灵活（Shopify的forloop.index0会生成动态ID），而且层级嵌套也写错了；另外nth-child的使用场景也没对应上你的结构。

正确的CSS代码 #

根据你的HTML结构，直接用伪类选择器定位第二个label.selectorv2，再找到内部的.eraser_text即可：

/* 精准定位第二个label里的.eraser_text */
.selectorv2:nth-of-type(2) > .sn_ys > .eraser_text {
  color: red;
}

如果你的页面结构不会有层级冲突，也可以用更简洁的后代选择器版本：

.selectorv2:nth-of-type(2) .eraser_text {
  color: red;
}

代码解释 #

• .selectorv2:nth-of-type(2)：选中父元素下的第二个label.selectorv2元素（对应第二个产品变体）
• > .sn_ys > .eraser_text：精准定位到该label下直接子元素.sn_ys里的直接子元素.eraser_text，避免影响其他无关元素

如何添加到Shopify #

你可以把这段代码添加到：

• 在线商店 > 主题 > 自定义 > 主题设置 > 自定义CSS（大部分主题都有这个入口）
• 或者直接编辑主题的theme.css/base.css等样式文件

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