如何将一个属性应用于 Sass 选择器列表中的多个后代选择器

Question

如果我使用这个：

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child
            >a.ui-btn
                border-bottom: 1px solid $border-color

...逗号前的整个部分在 CSS 输出中被忽略：

.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
  border-bottom: 1px solid #a7a7a7; }

我也试过这个，认为＆符号会把父选择器（在逗号之前）放在它的位置：

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
            & >a.ui-btn
                border-bottom: 1px solid $border-color

似乎逗号被忽略了。

与此相同的结果：

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
            >a.ui-btn
                border-bottom: 1px solid $border-color

看来我能得到我要找的东西的唯一方法是：

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
            border-bottom: 1px solid $border-color
            >a.ui-btn
                border-bottom: 1px solid $border-color

这给了我：

.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child {
  border-bottom: 1px solid #a7a7a7; }
  .ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
    border-bottom: 1px solid #a7a7a7; }

有没有办法在只列出 "border-bottom" 属性一次的情况下获得相同的输出？

Answer 1

您的逗号位置错误。你要找的是这个：

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child
            &, >a.ui-btn
                border-bottom: 1px solid $border-color

如何将一个属性应用于 Sass 选择器列表中的多个后代选择器

How can I apply one property to multiple descendent selectors in Sass selector list

sass

如何将一个 属性 应用于 Sass 选择器列表中的多个后代选择器

How can I apply one property to multiple descendent selectors in Sass selector list

sass

如何将一个属性应用于 Sass 选择器列表中的多个后代选择器