UL 元素的背景颜色不起作用

Question

我想像下图一样交替突出显示每 2 行

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

Answer 1

为 UL 添加 overflow:hidden 因为你的 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

您必须在 ul

内定位 li

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>0</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>0</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>0</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>0</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>0</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>0</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>0</td>
  </tr>
</table>

</body>
</html>

UL 元素的背景颜色不起作用

Background color for UL element didn't work

html

css

forms

sass

scss-mixins