Html 如何在不使用JavaSctript的情况下，仅使用基于父类的元素的特定类？

我试图做以下工作：当div容器显示类时，span将只使用类pseudo2，否则将使用类pseudo1。有一个预定义的css文件，我不想修改，我已经粘贴了我的自定义css文件，但它似乎不起作用。有谁知道更好的解决办法吗

html

我的自定义css

---

CSS级联顺序非常重要：

.show .pseudo2:before{
   content:"/013";
}    
.show .pseudo1:before{
   content:none;
}    

现在，.show.pseudo1:before更相关。您也可以使用！重要的

请参阅如何工作：

阅读。

你不需要内容：无；要完成此操作，请参阅：

您不想修改的预定义css文件

您的自定义css

我认为使用类.pseudo1和.pseudo2有点混乱，所以我做了一些更简单的事情：

它基本上覆盖了预定义的规则，但我认为它更容易阅读

---

它应该做什么？它起作用了，但我想知道为什么在自定义css中重复定义了相同的样式后，它起作用了…@FabianMebus您刚刚编辑了代码，却忘了放。在最后一部分显示，这就是我问的原因。但是，您明白了：内容：无；在他的代码上遇到了一些麻烦。@Blake，如果您指定了完全相同的CSS属性，例如内容：/012；在CSS中的某个地方对同一个元素执行两次，最后一个元素将始终获胜。

.pseudo1:before{
   content:"/012";
}
.pseudo2:before{
   content:"/013";
}

.show .pseudo1:before{
   content:none;
}    
.show .pseudo2:before{
   content:"/013";
}    
.pseudo2:before{
       content:none;
}

.show .pseudo2:before{
   content:"/013";
}    
.show .pseudo1:before{
   content:none;
}    

.pseudo1:before{
   content:"/012";
}
.pseudo2:before{
   content:"/013";
}

.pseudo1:before{
   content:"/012";
}

.show .pseudo2:before{
   content:"/013";
}

/* predefined css */

.pseudo1:before{
   content:"/012";

}
.pseudo2:before{
   content:"/013";
}


/* my custom css */

.container span:before{
   content:"/012";
}    
.container.show span:before{
   content:"/013";
}