我可以使用父元素的样式覆盖Sass的子元素吗？

Question

我有一个表，当行或列满足条件时，会添加CSS类。行（技术单元格）元素<td>的类将覆盖列元素<tr>。

这是生成的HTML

 <table>
    <tr data-v-5cc42bfc="" item-index="1" render="true" class="row-title-1">
      <td data-v-5cc42bfc="">Ahmad Ortiz Jr.</td>

      <td data-v-5cc42bfc="" class="center aligned column-total">lkulas@example.com</td>

      <td data-v-5cc42bfc="">1</td>

      <td data-v-5cc42bfc="">1992-09-12 00:00:00</td>

      <td data-v-5cc42bfc="">in</td>

      <td data-v-5cc42bfc="">F</td>
    </tr>
  </table>

SCSS代码

.column-total {
  background-color: #e0e0e0;
}
.row-title-1 {
  background-color: #699dcd;
}

https://codepen.io/hanxue/pen/GxwXdG

的完整可重复示例

列样式将覆盖行样式

解决方法

可以通过更具体的样式来解决问题，例如：

.row-title-1 {
  background-color: #699dcd;
  .column-total {
    background-color: #699dcd;
  }
}
.row-title-2 {
  background-color: #89b2d8;
  .column-total {
    background-color: #699dcd;
  }
}
.row-title-3 {
  background-color: #a1c7e4;
  .column-total {
    background-color: #699dcd;
  }
}
.column-total {
  background-color: #e0e0e0;
}

问题是这种方法不可扩展，并且随着行和列样式数量的增加而迅速变得复杂。

问题

父元素的样式是否有任何方法可以覆盖其子元素？

Answer 1

如上所述，问题不是覆盖问题，而是单元格元素（import tkinter as tk # for python 2, replace with import Tkinter as tk import random class Ball: def __init__(self): self.xpos = random.randint(0, 254) self.ypos = random.randint(0, 310) self.xspeed = random.randint(1, 5) self.yspeed = random.randint(1, 5) class MyCanvas(tk.Canvas): def __init__(self, master): super().__init__(master, width=254, height=310, bg="snow2", bd=0, highlightthickness=0, relief="ridge") self.pack() self.balls = [] # keeps track of Ball objects self.bs = [] # keeps track of Ball objects representation on the Canvas for _ in range(25): ball = Ball() self.balls.append(ball) self.bs.append(self.create_oval(ball.xpos - 10, ball.ypos - 10, ball.xpos + 10, ball.ypos + 10, fill="saddle brown")) self.run() def run(self): for b, ball in zip(self.bs, self.balls): self.move(b, ball.xspeed, ball.yspeed) pos = self.coords(b) if pos[3] >= 310 or pos[1] <= 0: ball.yspeed = - ball.yspeed if pos[2] >= 254 or pos[0] <= 0: ball.xspeed = - ball.xspeed self.after(10, self.run) if __name__ == '__main__': shop_window = tk.Tk() shop_window.geometry("254x310") c = MyCanvas(shop_window) shop_window.mainloop() ）的背景高于td元素的背景。以下是使用线性渐变作为tr

的背景来确认此示例的示例

td

table {
  border-collapse:collapse;
}
td {
 padding:20px;
}
.color-tr {
 background:red;
}
.color-td {
 background:linear-gradient(blue,transparent);
}

为避免这种情况，您可以使用自定义属性（CSS变量）并考虑将默认值设置为要应用于we can see the red behind the gradient so there is no override <table> <tr class="color-tr"> <td class="color-td">aaa</td> <td>bbb</td> </tr> </table>的颜色。由于自定义属性是继承的，因此您只需在td内对其进行说明，它将在tr中使用，而不是默认属性。

以下是一个例子：

td

table {
  border-collapse:collapse;
  background:#ccc;
}
td {
 padding:20px;
 color:#fff;
}
.color-tr1 {
 --c:blue;
 background:var(--c);
}
.color-tr2 {
 --c:black;
 background:var(--c);
}
.color-td1 {
  background:var(--c,red);
}
.color-td2 {
  background:var(--c,pink);
}

正如您所看到的，当您为<table> <tr class="color-tr1"> <td class="color-td1">With color</td> <td>no color</td> <td>no color</td> <td>no color</td> </tr> <tr > <td class="color-td1">With color</td> <td>no color</td> <td class="color-td2">With color</td> <td>no color</td> </tr> <tr > <td class="color-td1">With color</td> <td>no color</td> <td>no color</td> <td class="color-td2">With color</td> </tr> <tr class="color-tr1"> <td class="color-td2">With color</td> <td>no color</td> <td>no color</td> <td class="color-td1">With color</td> </tr> </table>定义背景颜色时，我们将设置一个自定义属性，覆盖与tr一起使用的默认属性;因此td将具有相同的背景。