不能用css psudo设置奇怪的背景？

Question

我想将每个odd li设置为黑色背景。我尝试过使用nth-child ,nth-of-type！但它改变了all li背景。

需要修复此行（不按预期结果）

  

.ads ul li：nth-​​of-type（odd）{     背景：＃000;   }

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  font-family: "Bauhaus 93",serif;
}
.ads div {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin: 2rem 3rem 2rem 5rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}
.ads ul {
 box-shadow: 0 1px 1px rgba(0,0,0,.5);
  list-style-type: none;
}
.ads ul li {
  width: 100%;
  margin:0;  
  padding: 0; 
  display: inline-block;
}
.ads ul li:nth-of-type(odd) {
  background: #000;
}
.ads ul li h3,.ads ul li span {
  width: 49%;
  line-height: 40px;
  float: left;
  font-size: .9rem;
  font-weight: 400;
}
.ads ul li span {
  text-align: right;
}
.tit {  
  line-height: 90px;
}
#pop {
  background: #f1ae32;
}
#rk {
  background: #ff899e;
  color : #494949;
}
#rb {
  background: #3b3bdb;
}
#pop li {
  color:#f1ae32;
}
#rk li {
  color: #ff899e;
}
#rb li {
  color :#3b3bdb;
}

＆＃13;

<section class="ads">
  <div id="pop">
    <span class="tit">Lastest Pop</span>
     <ul>
      <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
          <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
    </ul>
  </div>
  <div id="rk">
    <span class="tit">Lastest Rock</span>
    <ul>
      <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
          <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span><li>
    </ul>
  </div>
 
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该关闭<li>元素

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  font-family: "Bauhaus 93", serif;
}

.ads div {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin: 2rem 3rem 2rem 5rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}

.ads ul {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  list-style-type: none;
}

.ads ul li {
  width: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.ads ul li:nth-of-type(odd) {
  background: #000;
}

.ads ul li h3,
.ads ul li span {
  width: 49%;
  line-height: 40px;
  float: left;
  font-size: .9rem;
  font-weight: 400;
}

.ads ul li span {
  text-align: right;
}

.tit {
  line-height: 90px;
}

#pop {
  background: #f1ae32;
}

#rk {
  background: #ff899e;
  color: #494949;
}

#rb {
  background: #3b3bdb;
}

#pop li {
  color: #f1ae32;
}

#rk li {
  color: #ff899e;
}

#rb li {
  color: #3b3bdb;
}

＆＃13;

<section class="ads">
  <div id="pop">
    <span class="tit">Lastest Pop</span>
    <ul>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
    </ul>
  </div>
  <div id="rk">
    <span class="tit">Lastest Rock</span>
    <ul>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
    </ul>
  </div>

</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

* {
  margin: 0;
  padding: 0;
  font-family: "Bauhaus 93",serif;
}
.ads div {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin: 2rem 3rem 2rem 5rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}
.ads ul {
 box-shadow: 0 1px 1px rgba(0,0,0,.5);
  list-style-type: none;
}
.ads ul li {
  width: 100%;
  margin:0;  
  padding: 0; 
  display: inline-block;
}
.ads ul li:nth-of-type(odd) {
  background: #000;
}
.ads ul li h3,.ads ul li span {
  width: 49%;
  line-height: 40px;
  float: left;
  font-size: .9rem;
  font-weight: 400;
}
.ads ul li span {
  text-align: right;
}
.tit {  
  line-height: 90px;
}
#pop {
  background: #f1ae32;
}
#rk {
  background: #ff899e;
  color : #494949;
}
#rb {
  background: #3b3bdb;
}
#pop li {
  color:#f1ae32;
}
#rk li {
  color: #ff899e;
}
#rb li {
  color :#3b3bdb;
}

<section class="ads">
  <div id="pop">
    <span class="tit">Lastest Pop</span>
     <ul>
      <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
          <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
    </ul>
  </div>
  <div id="rk">
    <span class="tit">Lastest Rock</span>
    <ul>
      <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
          <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
        <li><h3>Red(Taylor Swift)</h3><span>03:24</span></li>
    </ul>
  </div>
 
</section>

您尚未关闭li标记，这是无效的HTML语法。

希望这有帮助。

Answer 3

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  font-family: "Bauhaus 93", serif;
}

.ads div {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin: 2rem 3rem 2rem 5rem;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
}

.ads ul {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  list-style-type: none;
}

.ads ul li {
  width: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.ads ul li:nth-of-type(odd) {
  background: #000;
}

.ads ul li h3,
.ads ul li span {
  width: 49%;
  line-height: 40px;
  float: left;
  font-size: .9rem;
  font-weight: 400;
}

.ads ul li span {
  text-align: right;
}

.tit {
  line-height: 90px;
}

#pop {
  background: #f1ae32;
}

#rk {
  background: #ff899e;
  color: #494949;
}

#rb {
  background: #3b3bdb;
}

#pop li {
  color: #f1ae32;
}

#rk li {
  color: #ff899e;
}

#rb li {
  color: #3b3bdb;
}

＆＃13;

<section class="ads">
  <div id="pop">
    <span class="tit">Lastest Pop</span>
    <ul>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
    </ul>
  </div>
  <div id="rk">
    <span class="tit">Lastest Rock</span>
    <ul>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
      <li>
        <h3>Red(Taylor Swift)</h3><span>03:24</span>
      </li>
    </ul>
  </div>

</section>

＆＃13;

＆＃13;

＆＃13;