li元素:nth-child(odd/even)选择器失效问题求助

嘿，我一眼就揪出你这个奇偶行背景失效的问题啦！

问题根源 #

你用的nth-child(odd)/nth-child(even)是根据父元素下所有子元素的位置来计数的，但你的<ul>里每个<li>后面都跟了一个<br>标签——也就是说，你的<ul>子元素顺序是：li → br → li → br → li → br...，这样每个<li>都处在第1、3、5...的奇数位置，自然全部应用了奇数行的背景色。

两种解决方案 #

方案1：移除多余的<br>标签

<ul>和<li>是原生的列表元素，默认就是块级换行，完全不需要手动加<br>来换行。把所有</li><br>改成</li>即可，修改后的HTML结构如下：

<div id="technotes" class="block nb-coul well">
 <div class="block-in">
 <ul id="blocNotesTech">
 <li class="oneFile gc tips ">
 <a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong>&nbsp;» </a> &nbsp;<span class="tout-pt-txt small">(0.16 Mo) </span><br>
 <cite class="tout-pt-txt"><em>azertyui...</em> </cite>
 </li>
 <li class="oneFile hplc ">
 <a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong>&nbsp;» </a> &nbsp;<span class="tout-pt-txt small">(0.16 Mo) </span><br>
 <cite class="tout-pt-txt"><em>azertyui...</em> </cite>
 </li>
 <li class="oneFile gc tips ">
 <a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong>&nbsp;» </a> &nbsp;<span class="tout-pt-txt small">(0.16 Mo) </span><br>
 <cite class="tout-pt-txt"><em>azertyui...</em> </cite>
 </li>
 <li class="oneFile hplc ">
 <a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong>&nbsp;» </a> &nbsp;<span class="tout-pt-txt small">(0.16 Mo) </span><br>
 <cite class="tout-pt-txt"><em>azertyui...</em> </cite>
 </li>
 </ul>
 </div>
</div>

方案2：改用nth-of-type选择器

如果因为某些限制不能移除<br>，可以把CSS里的nth-child换成nth-of-type——这个选择器只会筛选父元素下同类型的元素，也就是只统计<li>，忽略<br>：

#technotes ul > li:nth-of-type(odd){ background-color: #f9f9f9; }
#technotes ul > li:nth-of-type(even){ background-color: #ECEDE6; }

额外小提示 #

你的li样式里border-bottom: 1px blue !important;写法有误，缺少边框样式，应该改成：

#technotes li{ 
  display: inline-block; 
  background: none; 
  background-position: center left!important; 
  padding: 43px 2px 43px 72px!important; 
  font-size: 130%; 
  border-bottom: 1px solid blue !important; /* 补充solid属性，边框才会显示 */
}

内容的提问来源于stack exchange，提问作者user1011212