时间戳

首页 > 解决方案 > Html and CSS: Unable to Change Background Color of Container

html - Html and CSS: Unable to Change Background Color of Container

问题描述

I am trying to change the background color of the header where it says className="NetworkListHeader", but the color is not changing. I want the top portion of the container to be a different color than the body of the container.

HTML code:

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 code:

.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;
}

标签： htmlcsscss-selectors

解决方案

标头位于 that 内的h2标签中div，因此请将此选择器用于您的 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;
}

推荐阅读