1. 首頁
  2. 問答
  3. 不能用css psudo設置奇怪的背景嗎？

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

2017-07-14 39 views
1

我想將每個odd li設置爲黑色背景。我嘗試過nth-child ,nth-of-type！但它改變了all li的背景。不能用css psudo設置奇怪的背景嗎？

需要修復這個行（不按預期結果）

.ads UL李：第n的類型（奇）{ 背景：＃000; }

* { 
 
    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>

來源

2017-07-14 David JorHpan

+0

怎麼把我寫的大模板 –

+0

確定@Nick我沒有注意到它，我得到了它 –

回答

0

應關閉<li>元素

* { 
 
    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>

來源

2017-07-14 08:11:24 fen1x

0 

* { 
 
    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語法。

希望這會有所幫助。

來源

2017-07-14 08:13:27

0 

* { 
 
    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>

來源

2017-07-14 08:19:01

相關問題

 相關問題