CSS在react中以className为目标时不会更改文本颜色或大小

Question

我正试图针对weather-location-container和location来更改CSS中的文本设计/颜色。

我的所有其他CSS似乎都运行良好。我不知道为什么它不起作用？

感谢

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app {
text-align: center;
background-image: url("./assets/376.png");
min-height: 100vh;
display: flex;
flex-direction: column;
}

main {
min-height: 100vh;
padding: 50px;
margin: 75px;
}
.search {
width: 100%;
}
.search .postcode-search-bar {
display: block;
width: 100%;
padding: 15px;
border: none;
background-color: rgba(255, 255, 255, 0.671);
border-radius: 16px 16px 16px 16px;
box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
font-size: 1rem;
text-align: center;
transition: 0.4s ease;
}
.search .postcode-search-bar:focus {
background-color: rgba(255, 255, 255, 0.89);
}
h1::before {
content: "1F31E";
padding: 10px;
}
h1::after {
content: "1F30D";
padding: 10px;
}
h1 {
color: rgb(1, 55, 102);
padding: 30px;
}
/* Why isn't the below working? */
.weather-location-container .location {
color: red;
font-size: 3rem;
font-weight: 500;
text-align: center;
}

React

import "./App.css";
function App() {
let date = new Date().toDateString();
date = date.slice(3, 15);
return (
<div className="app">
<main>
<div className="search">
<h1>Local Weather</h1>
<input
type="text"
className="postcode-search-bar"
placeholder="Enter your postcode..."
/>
</div>
<div className="weather-location-container">
<div className="location">London</div>
<div className="date">{date}</div>
</div>
<div className="weather-container">
<div className="temp">8°c</div>
<div className="weather">Cloudy</div>
</div>
</main>
</div>
);
}
export default App;

Answer 1

尝试更具体的

main .weather-location-container .location {
color: red;
font-size: 3rem;
font-weight: 500;
text-align: center;
}

Answer 2

代码工作正常。在使用dev工具检查div之后，它显示London文本位于一个名称不同的容器中。

事实证明我没有保存app.js文件-仍在学习：(

现在一切都好了。

感谢关于如何调试此的提示的评论