如何在sass中的公共子元素中添加两个不同的父元素？

Question

是否可以将两个不同的父元素添加到单个公共子元素中？

next和prev都在其HTML结构中包含一个span元素。

.carousel-control-next,.carousel-control-prev{
       width:unset;
        span{
            background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(252,122,34)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")!important;
        }


    }

这仅适用于下一个元素“ .carousel-control-next”，但不适用于上一个元素“ .carousel-control-prev”？如何使其同时适用于这两个元素？

Answer 1

也许您正在寻找这样的东西：

.parent1, .parent2 {
  & .child {
    color: red;
  }
}

渲染的CSS是：

.parent1 .child, .parent2 .child {
  color: red;
}

我认为直接向孩子添加一个班级而不管父母是一个更好的选择：

.redChild {
   color: red;
}

Answer 2

这是CSS的正确格式：

.carousel-control-next span,.carousel-control-prev span{
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(252,122,34)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")!important;
}