問題描述：

某個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巢狀內就可以了，或者減少原先的類的優先順序等。