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>

，我想对TEXT1（“ bet-text”类）使用LESS来应用某种样式，而其叔叔是否拥有cercaion类（在本例中为icongb-cancelled）。我也想将其应用于TEXT2（无类）。有可能吗？

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

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

注意：我不想使用JQuery添加或删除任何类。我只想使用LESS而无需对HTML进行任何修改即可。

谢谢。

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

Answer 1

您正在选择器中使用.icongb_canceled，但是类是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将样式应用于类的侄子元素

2 个答案: