Question

我正在尝试建立一个表，该表将具有X行数，并且每行的背景色均由ID（或类，无论哪种方式...这都是用来标识每一行的类别）的。最重要的是，我想使用nth-child更改每个偶数行的背景的不透明度，以便如果特定类别有很多行，则用户可以轻松浏览表。我在JSFiddle上设置了一些代码，但是整个行的内容（文本，背景，边框）都会受到影响，而不仅是背景（这当然很有意义）。

#a {   background:lightblue; }
#b {   background:orange; }
#c {   background:lightgreen; }
.row:nth-child(even) {
  opacity: .60;
}

Full code here

到目前为止，我发现的所有解决方案都不能解决不同的行背景色，或者涉及到多层使用的复杂问题，从而导致第n个子选择器出现问题。似乎大多数答案都来自不久前，所以我希望有一个更新的解决方案。

任何帮助或建议都将不胜感激！

Answer 1

不透明度会影响row的所有属性，因为这就是您要选择的。要仅影响背景颜色，可以将.row:nth-child(event)选择器更改为以下CSS：

.row.a:nth-child(even) {
  background-color: rgb(173, 216, 230, .6);
}
.row.b:nth-child(even) {
  background-color: rgb(255, 165, 0, .6);
}
.row.c:nth-child(even) {
  background-color: rgb(144, 238, 144, .6);
}

您应该调整HTML以使用类而不是ID（有关更多信息，请参见https://css-tricks.com/the-difference-between-id-and-class/）

<div class="container">
  <div id="table">
    <div class="row a">
      Row 1 / Cat 1
    </div>
    <div class="row a">
      Row 2 / Cat 1
    </div>
    <div class="row a">
      Row 3 / Cat 1
    </div>
    <div class="row b">
      Row 4 / Cat 2
    </div>
    <div class="row b">
      Row 5 / Cat 2
    </div>
    <div class="row c">
      Row 6 / Cat 3
    </div>
    <div class="row c">
      Row 7 / Cat 3
    </div>
    <div class="row c">
      Row 8 / Cat 3
    </div>
  </div>
</div>

然后您的最终CSS将是：

.container {   padding: 20px; }
.row {   padding: 5px 15px;  border-bottom: 1px solid black; }
.a {   background-color: rgb(173, 216, 230, 1); /*lightblue*/ }
.b {   background-color: rgb(255, 165, 0, 1); /*orange*/ }
.c {   background-color: rgb(144, 238, 144, 1); /*lightgreen*/ }
.row:nth-child(1) {   border-top: 1px solid black; }

.row.a:nth-child(even) {
  background-color: rgb(173, 216, 230, .6); /*lightblue less opaque*/
}
.row.b:nth-child(even) {
  background-color: rgb(255, 165, 0, .6); /*orange less opaque*/
}
.row.c:nth-child(even) {
  background-color: rgb(144, 238, 144, .6); /*lightgreen less opaque*/
}

有关有效版本，请参见https://jsfiddle.net/WOUNDEDStevenJones/u46nkjb0/1/

使用nth-child（）选择器更改JUST行背景

1 个答案: