如何将使用 LESS 的样式应用于 class 的侄子元素

Question

我在 HTML 上有这些元素：

 <div id="td-status" class="icongb-cancelled"></div>
 <div class="ticket-header-text">
     <span class="bet-text">TEXT1</span>
     <span>TEXT2</span>
  </div>

并且我想将使用 LESS 的某种样式应用到 TEXT1 ('bet-text' class) 是否它的叔叔有一个 cercaion class（在这种情况下 icongb-cancelled）。我也想将它应用到 TEXT2（没有 class）。有可能吗？

我正在使用此代码，但它不起作用：

 .icongb_cancelled ~ .ticket-header-text {
     & .bet-text {
         color: #959595;
     }
 }

注意：我不想使用 JQuery 添加或删除任何 class。我想只使用 LESS 而不对 HTML.

进行任何修改

提前致谢。

编辑：代码没问题，问题是我使用的是下划线而不是破折号。所以您可以使用该代码将样式应用于侄子元素。

Answer 1

您在选择器中使用 .icongb_canceled，但 class 是 icongb-canceled。
破折号 对比 下划线。他们需要匹配。

Answer 2

你可以写 .icongb-cancelled ~ .ticket-header-text .bet-text，它在 CSS 中有效，但也是 LESS 兼容的：

.icongb-cancelled ~ .ticket-header-text .bet-text {
  color: blue;
}

.icongb-cancelled ~ .ticket-header-text span {
  color: green;
}

<div id="td-status" class="icongb-cancelled"></div>
 <div class="ticket-header-text">
     <span class="bet-text">TEXT1</span>
     <span>TEXT2</span>
  </div>

如何将使用 LESS 的样式应用于 class 的侄子元素

How can I apply a style using LESS to a nephew element of a class

html

css

less