属性未应用于节

时间:2015-10-28 16:39:17

标签: html css

我正在应用于横幅内部的部分(类名= R_banner)的属性由于某种原因未应用。有人可以帮助我。

HTML:

<body>

            <div id="Container">
                 <header id="M_head">
                    <a href=""><img id="M_logo1" src="MircLogo.png"></a>
                    <a href=""><img id="M_logo2" src="MircLogo.png"></a>
                    <ul>
                        MIRCSQUAD Entertainment
                    </ul>
                </header>
                <div id="space"></div>
                <nav id=M_nav>

                            <ul>
                                <li><a href="">MUSIC</a><li>
                                <li><a href="">STORE</a><li>
                                 <li><a href="">NEWS</a><li>
                                <li><a href="">BLOG</a><li>
                                <li><a href="">ABOUT</a><li>
                            </ul>

                </nav>
                <section id="M_sec">
                    <div id="banner" >
                        <img class="Img1"src="Mirc.jpg">
                        <div class="R_banner"> 
                            <h1>
                                <a href="">The new kid on the block</a>
                            </h1>
                           <section>WHATS GOOD</section> 
                        </div>
                    </div>
                </section>
                <footer id="M_foot"></footer>
            </div>
        </body>

Jsfiddle链接:http://jsfiddle.net/3ebvxd7a/

的CSS:

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
* body {
  text-align: center;
}
* body #Container {
  height: 50em;
  width: 100%;
  margin: 0px auto;
  background-color: white;
}
* body #Container #M_head {
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
  width: 100%;
  color: Black;
  background-color: white;
  text-align: left;
}
* body #Container #M_head ul {
  background-color: inherit;
  width: 40%;
  margin-left: 6.25em;
  padding-top: 45px;
  font-family: Arial;
  font-style: italic;
  font-weight: 500;
  font-size: 1.875em;
  letter-spacing: -0.125em;
  text-shadow: 2px 2px 10px;
}
* body #Container #M_head #M_logo1 {
  height: 5em;
  width: 5em;
  float: left;
  margin-left: 5px;
  border: 2px solid darkred;
  background-color: white;
  border-radius: 100px;
}
* body #Container #M_head #M_logo2 {
  height: 5em;
  width: 5em;
  margin-right: 5px;
  float: right;
  border: 2px solid darkred;
  background-color: white;
  border-radius: 100px;
}
* body #Container #M_nav {
  background-color: black;
  width: 100%;
  z-index: 10;
}
* body #Container #M_nav ul {
  list-style-type: none;
  background-color: black;
  background-size: cover;
}
* body #Container #M_nav ul li {
  display: inline-block;
  background-color: black;
  text-align: center;
  margin: auto;
}
* body #Container #M_nav ul li a {
  display: inherit;
  text-decoration: none;
  padding: 10px;
  padding-left: 70px;
  padding-right: 70px;
  color: white;
  font-weight: bolder;
}
* body #Container #M_nav ul li a:hover {
  background-color: #ffbf00;
}
* body #Container #M_sec {
  height: 200em;
  background-image: url(MircBackground.jpg);
  background-size: cover;
}
* body #Container #M_sec #banner {
  width: 100%;
  text-align: left;
}
* body #Container #M_sec #banner .Img1 {
  width: 50%;
  height: 400px;
}
* body #Container #M_sec #banner .R_banner {
  width: 50%;
  text-align: center;
  height: 400px;
  float: right;
  color: white;
}
* body #Container #M_sec #banner .R_banner h1 {
  color: black;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  height: 50px;
  text-align: center;
  margin-left: 0px;
  background-color: white;
}
* body #Container #M_sec #banner .R_banner h1 a {
  text-decoration: none;
  color: inherit;
}
* body #Container #M_sec #banner .R_banner h1 section {
  border: 2px solid green;
  height: 350px;
  background-color: aqua;
}

1 个答案:

答案 0 :(得分:0)

此选择器body #Container #M_sec #banner .R_banner h1 section不正确。 section不在h1内,这就是为什么风格不起作用。

将其更改为#Container #M_sec #banner .R_banner section