记一次css属性覆盖的问题

问题描述：

某个div有id为signUpModal，其中有个图片我将其初始transform的rotateZ值设置为180deg，这个属性包含在male-picture的class中，因为我是用sass写的，所以是直接嵌套写的，最终被编译为 #signUpModal .male-picture {...}。之后我希望在click某个按钮后rotateZ值设置为360deg，为了浏览器的兼容性也为了偷懒，我选择在该元素中添加类来覆盖原来的rotateZ属性。于是我在signUpModal嵌套之外写了个类，希望在js中通过click事件添加该类到该元素中，以达到覆盖属性的目的，但结果总是没有响应。

问题查找：

于是我通过浏览器自带调试工具检查，发现新添加的类的属性被原来就存在的属性覆盖了！所以没有发生变化。仔细一看，发现原先的类全称为#signUpModal .male-picture{...}， 而新加的类则赤裸裸的是 .new-style{...}，这样我就发现了因该是类名导致类之间的优先级发生了变化，就发生了我这个问题。

问题解决：

把.new-style类放在signUpModal嵌套内就可以了，或者减少原先的类的优先级等。