CSS选择带可变ID的第二个class子元素失效，求正确实现方案

首先，你的CSS选择器失效的核心原因是父元素的选择器写错了：你用了div#test_name（ID选择器），但目标父元素的属性是class="test_name"，两者完全不匹配，导致整个选择器无法定位到正确的父容器。

结合你的HTML结构（父元素下直接是两个带.testing类的div），修正父元素选择器后就能正常选中目标元素。

正确的CSS选择器写法 #

写法一：精准匹配父元素的直接子元素中的第二个.testing #

（推荐这种写法，避免意外选中深层嵌套的同名类元素）

div.test_name > .testing:nth-child(2) { background: red; }

写法二：匹配父元素所有后代中的第二个.testing #

如果你的页面结构不会出现深层嵌套的.testing元素，也可以用这个更简洁的写法：

div.test_name .testing:nth-child(2) { background: red; }

进阶适配：父元素未来可能插入其他类型子元素 #

如果之后父容器里可能加入非div类型的子元素（比如<p>、<span>），可以用:nth-of-type确保选中第二个div类型的.testing元素：

div.test_name > div.testing:nth-of-type(2) { background: red; }

原选择器失效的关键细节 #

• div#test_name中的#是ID选择器，而你的父元素用的是class属性，必须改用.（类选择器）写成div.test_name，否则选择器根本找不到目标父容器。
• 当父元素选择器错误时，整个选择链都会失效，自然无法为目标元素应用样式。

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