如何选择所有属性值均为奇数的元素

Question

如何选择属性值奇数的所有元素。例如：

<tr class="MuiTableRow-root" index="0" level="0" path="0" style="transition: all 300ms ease 0s; pointer-events: inherit;">
<tr class="MuiTableRow-root" index="1" level="0" path="0" style="transition: all 300ms ease 0s; pointer-events: inherit;">
<tr class="MuiTableRow-root" index="2" level="0" path="0" style="transition: all 300ms ease 0s; pointer-events: inherit;">

我想在使用CSS的索引属性值为奇数的tr上应用样式。

Answer 1

您可以尝试以下操作：

[index$='1'],
[index$='3'],
[index$='5'],
[index$='7'],
[index$='9'] {
  color: red;
}

.MuiTableRow-root {
  font-size:25px;
}
.MuiTableRow-root::before {
  content:attr(index);
}

<div class="MuiTableRow-root" index="0" level="0" path="0"></div>
<div class="MuiTableRow-root" index="1" level="0" path="0"></div>
<div class="MuiTableRow-root" index="2" level="0" path="0"></div>
<div class="MuiTableRow-root" index="19" level="0" path="0"></div>
<div class="MuiTableRow-root" index="33" level="0" path="0"></div>
<div class="MuiTableRow-root" index="42" level="0" path="0"></div>
<div class="MuiTableRow-root" index="40" level="0" path="0"></div>

Answer 2

tr:nth-child(odd) {
  background: red;
}

您可以使用它。

Answer 3

在选择器的末尾尝试:nth-child(odd)。

示例：

tr:nth-child(odd) {
    color: red;
}