Хотите добавить класс CSS в другой класс CSS с другим свойством

Question

Я использую два класса CSS для выделения цвета значка белым и изменения цвета фона тега 'h6' на # 325868.

Цвет значка по умолчанию черный цвет . Теперь я фактически использовал класс ' .highlighted_fileName ' для выделения элемента 'h6' , и моя иконка помещается в тег 'span' рядом с тег 'h6' . Ниже мой код, который я попробовал, пожалуйста, обратитесь к тому же.

.highlighted_fileName{
    color:white !important;
    background-color: #325868 !important;

    .closeTab{
        color:#ffffff;
     }
}

<h6 class="float-left fileName card elementSelectedId truncate" data-toggle="tooltip" title=` +noOfEditors[0].pathTitle+ ` id="featureFileName_1"
                                style="border-color: cadetblue;  left: 0.5vw; top: 2vh; font-weight: bolder; border-width: thin;" 
                                 onclick="openEditorTab(this,noOfEditors[0].pathTitle,noOfEditors[0].fileName);">&nbsp;`+ noOfEditors[0].fileName +`</h6><span><i id = "icon_1" class="fa fa-times closeTab" style="position: relative; top: 26px; right: 10px;display:block;" onclick="closeTab(this,noOfEditors[0].pathTitle,noOfEditors[0].fileName,document.getElementById('featureFileName_1'));" aria-hidden="true"></i></span>

Я знаю, что это не так, поскольку я пробовал, и это не дало мне результат, как мои ожидания , Так может кто-нибудь, пожалуйста, скажите мне, как я могу достичь этого. Также, пожалуйста, обратитесь к рисунку ниже для получения дополнительной информации.

Answer 1

Добавить следующее

.highlighted_fileName + span i{
Color:#fff:
} 

Answer 2

Если вы не используете препроцессор CSS, такой как SASS или LESS , наборы правил вложения не разрешены. Таким образом, ваш closeTab набор правил, вероятно, игнорируется.

Чтобы решить эту проблему, просто выделите ваш класс closeTab из класса highlighted_fileName следующим образом:

.highlighted_fileName {
    color:white !important;
    background-color: #325868 !important;
}

.highlighted_fileName .closeTab {
    color:#ffffff;
}

В зависимости Что касается специфики наборов правил, предоставляемых Font Awesome, это все еще может не сработать. Как минимум, вы будете предоставлять браузеру CSS, который он сможет понять. Надеюсь, это поможет!

PS Как уже упоминал Виталий, следует избегать использования !important, если в этом нет крайней необходимости. Я не совсем понимаю ваш вариант использования, но я думаю, что вы сможете без него обойтись.

Answer 3

Пожалуйста, не используйте !important. Также для css kebab-case лучше. Проверьте это, просто переименуйте его, как хотите, и добавьте нужные цвета.

.label {
   color: #000;
   background-color: #fff;

  .close-icon {
     color:#000;
    }
 }
 .label.active {
     color: #fff;
     background-color: #000;

     .close-icon {
       color:#fff;
      }
 }