选择奇数和偶数元素

Question

我想将classpath 'com.android.tools.build:gradle:1.3.0' 和odd even元素设置为与我的表格不同。

这是我的代码：

jsFiddle

＆＃13;

＆＃13;

tr

＆＃13;

/*
Create a one-liner code to add the class ‘odd’ to an odd number row and the class ‘even’ to an even number row
Hint: Use the nth-child selector and the end() function
*/

＆＃13;

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid #000;
}
table {
  width: 100%;
}
tr.odd {
  background: rgba(0, 255, 0, 0.1);
}
tr.even {
  background: rgba(0, 0, 0, 0.1);
}

＆＃13;

＆＃13;

＆＃13;

提示：使用nth-child选择器和end（）函数

Answer 1

如果你有jQuery，可以使用:odd和:even选择器

UIWindowLevelNormal

Demo

＆＃13;

＆＃13;

$('tr:odd').addClass('odd');
$('tr:even').addClass('even');

＆＃13;

$('tr:odd').addClass('odd');
$('tr:even').addClass('even');

＆＃13;

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid #000;
}
table {
  width: 100%;
}
tr.odd {
  background: rgba(0, 255, 0, 0.1);
}
tr.even {
  background: rgba(0, 0, 0, 0.1);
}

＆＃13;

＆＃13;

＆＃13;

仅使用CSS

您还可以使用CSS <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <tr> <td>odd</td> <td>odd</td> </tr> <tr> <td>even</td> <td>even</td> </tr> <tr> <td>odd</td> <td>odd</td> </tr> <tr> <td>even</td> <td>even</td> </tr> <tr> <td>odd</td> <td>odd</td> </tr> </table>选择器选择奇数和偶数元素。

＆＃13;

＆＃13;

nth-child

＆＃13;

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid #000;
}
table {
  width: 100%;
}
tr:nth-child(2n) {
  background: rgba(0, 255, 0, 0.1);
}
tr:nth-child(2n + 1) {
  background: rgba(0, 0, 0, 0.1);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用css :nth-of-type()伪类选择器集odd，even值

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid #000;
}
table {
  width: 100%;
}
tr:nth-of-type(odd) {
  background: rgba(0, 255, 0, 0.1);
}
tr:nth-of-type(even) {
  background: rgba(0, 0, 0, 0.1);
}

<table>
  <tr>
    <td>odd</td>
    <td>odd</td>
  </tr>
  <tr>
    <td>even</td>
    <td>even</td>
  </tr>
  <tr>
    <td>odd</td>
    <td>odd</td>
  </tr>
  <tr>
    <td>even</td>
    <td>even</td>
  </tr>
  <tr>
    <td>odd</td>
    <td>odd</td>
  </tr>
</table>

Answer 3

尝试CSS奇数/偶数选择器。

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Answer 4

尝试使用伪类选择器添加样式：nth-​​of-type，偶数和奇数。

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid #000;
}
table {
  width: 100%;
}
tr:nth-of-type(odd) {
  background: rgba(0, 255, 0, 0.1);
}
tr:nth-of-type(even) {
  background: rgba(0, 0, 0, 0.1);
}

<table>
  <tr>
    <td>odd</td>
    <td>odd</td>
  </tr>
  <tr>
    <td>even</td>
    <td>even</td>
  </tr>
  <tr>
    <td>odd</td>
    <td>odd</td>
  </tr>
  <tr>
    <td>even</td>
    <td>even</td>
  </tr>
  <tr>
    <td>odd</td>
    <td>odd</td>
  </tr>
</table>