背景：我正在制作一個具有登錄組件、注冊組件、應用程序組件、食譜組件和 recipe_tile 組件的食譜應用程序。我有三個 CSS 文件：Registration.CSS、Login.CSS 和 APP.CSS。前兩個 css 文件分別用于注冊和登錄組件。而 APP.CSS 文件用于 app、recipe 和 recipe_tile 組件。問題：問題是某些 CSS 選擇器，如背景（包含背景圖像）顯示在每個組件中，盡管相關的 CSS 文件已導入組件。例如，Registration.CSS 是唯一導入注冊組件的 CSS 文件。我知道一個可能的解決方案是在每個組件中使用內聯樣式，但這可能很乏味且難以閱讀。我可以做任何其他可能的解決方案嗎？注冊.CSS 文件：*{    margin: 0}body{    font-family: "Open Sans", sans-serif;    top: 0;    left: 0;    background:     linear-gradient(        rgba(0, 0, 0, 0.45),         rgba(0, 0, 0, 0.45)      ),    url("https://i.imgur.com/9MDiW6B.jpg") 70% fixed;  background-size: cover;}.box{    color:#26a69a;    display: flex;    align-items: center;    flex-direction: column;     justify-content: center;    width: 40%;    height: 600px;    padding: 100px;    background: #ffffff;    margin-left: 30%;    margin-top: 5%;}登錄.CSS 文件：.wrap{    font-family: "Open Sans", sans-serif;    top: 0;    left:0;    background:     linear-gradient(        rgba(0, 0, 0, 0.45),         rgba(0, 0, 0, 0.45)      ),    url("https://i.imgur.com/9MDiW6B.jpg") 70% fixed;  background-size: cover;}.wrap{    color:#26a69a;    display: flex;    align-items: center;    flex-direction: column;     justify-content: center;    width: 40%;    height: 400px;    padding: 100px;    background: #ffffff;    margin-left: 30%;    margin-top: 5%;}APP.CSS 文件：*{  margin-left: 15px;}h1{  color:#26a69a}.inputs{  margin-left: 400px;}.recipe-input{  width: 50%;}.button-input{  margin-top: 30px}.card{  display: inline-block;  margin: 2px 100px 60px 2px;  text-align: center;  width: 25%;  height: 460px; }.card-image{  display: block;  margin-left: -15px;  width: 105%;  height: 250px;}.card-reveal{  text-align: left;}這是完整的源代碼：https ://github.com/SibRaza15/recipe_app/tree/master/src