Как я могу применить стиль, используя LESS к элементу племянника класса - PullRequest
Новая
       5

Как я могу применить стиль, используя LESS к элементу племянника класса

0 голосов
/ 21 ноября 2018

У меня есть следующие элементы в 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'), независимо от того, имеет ли его дядя класс cercaion (в этомдело icongb-отменено).Я хотел бы применить это также к TEXT2 (нет класса).Возможно ли это?

Я использую этот код, но он не работает: 

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

ПРИМЕЧАНИЕ. Я не хочу использовать JQuery для добавления или удаления любого класса,Я хочу сделать это, просто используя LESS без каких-либо изменений в HTML.

Заранее спасибо.

РЕДАКТИРОВАТЬ: код был в порядке, проблема заключалась в том, что я использовал подчеркивание вместотире.так что вы можете использовать этот код для применения стиля к элементу племянника.

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Вы можете написать .icongb-cancelled ~ .ticket-header-text .bet-text, который действителен в CSS, но также МЕНЬШЕ совместим: 

.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>
0 голосов
/ 21 ноября 2018

Вы используете .icongb_canceled в селекторе, но класс icongb-canceled.
Тире против подчеркивание .Они должны соответствовать.

...