Html 和 CSS：無法更改容器的背景顏色

Question

我正在嘗試更改標頭的背景顏色，它顯示className="NetworkListHeader" ，但顏色沒有改變。 我希望容器的頂部與容器的主體顏色不同。

HTML代碼：

class UserNetwork extends Component{

    render(){
      return(
        <div className="UserNetworkContainer">
                <div className="NetworkListHeader">
                  <h2>Your Network</h2>
                </div>
                <div><li>Object 1</li></div>
                <div><li>Object 2</li></div>
                <div><li>Object 3</li></div>
          </div>
      )
    }
};

export default UserNetwork;

CSS代碼：

.UserNetworkContainer{
  padding: 10px;
  position: absolute;
  border-radius: 7px;
  top:23%;
  right: 73%;
  width:23%;
  height: 50%;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0px 1px 12px 1px rgba(0, 0, 0, 0.17);
}

.NetworkListHeader{
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #2C3E50;
  font-size: 15px;
  margin-left: 70px;
  margin-top: 16px;
  background-color: blue;
}

Answer 1

標題位於該div內的h2標記中，因此請將此選擇器用於您的 CSS 規則：

.NetworkListHeader > h2 {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #2C3E50;
  font-size: 15px;
  margin-left: 70px;
  margin-top: 16px;
  background-color: blue;
}