Question

我想像下面的图片一样每两行交替突出显示

sample ouput

但是我不能使用UL元素使其工作。这是代码https://jsfiddle.net/

Answer 1

为overflow:hidden添加UL，因为您的li是floating

ul{
  overflow:hidden;
}

ul{
  overflow:hidden;
}
li{
    height: 10px;
    width: 32.33%;
    display: block;
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;
}

 ul:nth-child(4n), ul:nth-child(4n-1){
  background: gray;
  color: red;

}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<ul>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<ul>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>
<ul>
    <li>14</li>
    <li>15</li>
    <li>16</li>
</ul>

<ul>
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>

<ul>
    <li>20</li>
    <li>21</li>
    <li>22</li>
</ul>
<ul>
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>
<ul>
    <li>14</li>
    <li>15</li>
    <li>16</li>
</ul>

<ul>
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>

<ul>
    <li>20</li>
    <li>21</li>
    <li>22</li>
</ul>
<ul>
    <li>23</li>
    <li>24</li>
    <li>25</li>
</ul>

Answer 2

您必须定位li内的ul

ul:nth-child(4n) li, ul:nth-child(4n-1) li{
  background: gray;
  color: red;
}

Answer 3

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(4n), tr:nth-child(4n-1){
  background: gray;
  color: red;
}

</style>
</head>
<body>

<h2>Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

<table>
  <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table>

</body>
</html>

UL元素的背景色不起作用

3 个答案: