根据SCSS中的条件选择父样式

Question

我有一个表，我使用display: flex来显示该表。我还有两种类型的行，其中一种是表头，另一种是表体。表格的标题文本居中对齐。但是我想让body的其中一列右对齐。

现在您注意到，我用相同的宽度定义了净价格列的标题和正文。这样他们就可以适当地添加相同的宽度。现在我想添加一个样式，我只需要设置体的net price列应该是右对齐的

我如何在net-priceSCSS块内添加选择器，使样式仅适用于主体而不是表的标题?

<table>
<thead class="service-grid__wrapper__header">
<td>Header one</td><td class="net-price">Header two</td>
</thead>
<tbody class="service-grid__wrapper__body">
<td>Column one</td><td class="net-price">Columntwo</td>
</tbody>
</table>

.service-grid {
&__wrapper {
margin: 0;
background-color: $white;
&__header {
font-family: "Roboto-Medium";
display: flex;
}
&__body {
display: flex;
font-family: "Roboto-Regular";
}
.net-price {
width: 160px;
.myaddtional-style { /* Style block where I need to apply only to the body cell and not the header cell */
text-align: right;
}
}
}
}

Answer 1

您需要在选择器中使用service-grid__wrapper__body类。在当前的SCSS中表达这一点的最简单方法是这样的(省略了所有其他css属性):

.service-grid {
&__wrapper {
// order is important, regular styles before specialized styles
.net-price {
width: 160px; // the regular styles for net-price
}
&__header {
}
&__body {
.net-price { text-align: right; } // the special handling inside the __body
}
}
}

或者

.service-grid {
&__wrapper {
&__header {
}
&__body {
}
.net-price {
width: 160px;
}
&__body .net-price {
text-align: right;
}
}
}

这是另一个让你所有的同事感到困惑的选择:

.service-grid {
&__wrapper {
&__header {
}
&__body {
}
$wrapper-class: &;
.net-price {
width: 160px;
@at-root #{$wrapper-class}__body .net-price { text-align: right; }
}
}
}