CSS из классов, которые не применяются к содержимому навигации

ProgramBox

CSS из классов, которые не применяются к содержимому навигации

Post author:admin
Запись опубликована:10 апреля, 2023
Post category:Вопросы по программированию

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

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

HTML (убрал другие вкладки для удобства чтения)

 .unpublished {
  background-color: $green !important;
  color: red;
}

//also tried this
.tab-content {
  .unpublished {
    background-color: green !important;
    color: red;
  }
}

 <ul class="nav nav-tabs course-tabs" id="course" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
                <span class="fas fa-info-circle"></span>
                About this course space</a>
        </li>
    </ul>

 <div class="tab-content unpublished">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="unpublished">
                <span class="fas fa-times-circle"></span>Course space is not published
                <a href="#">Publish course space in Canvas arrow-right</a>
            </div>
       </div>
</div>

Ответ №1:

Кажется, вы используете переменные sass. Убедитесь, что все настройки sass верны. Под этим я подразумеваю, что main.scss и все используемые вами части работают нормально. Если это не исправлено, исправьте это и повторите попытку.

Также ссылка bootstrap CSS (или ссылка CDN) должна предшествовать нашему локальному файлу пользовательской таблицы стилей, чтобы переопределить стиль по умолчанию, применяемый bootstrap.

Краткий совет, однако, всякий раз, когда вы оказываетесь в таком состоянии, когда ваш стиль не применяется, и многие подобные вещи, вы должны просмотреть код в окне разработчика (Ctrl shift I в Windows и проверить стиль.

Это лучший способ изучить и решить свои проблемы самостоятельно.

Спасибо

1. ну вот и все… Мне определенно стыдно, что я забыл это после того, как сделал это уже несколько раз. Спасибо вам и всем остальным (у кого были правильные ответы на разные проблемы)

2. Продолжайте двигаться вперед! Попробуйте Еще раз. И никогда не сдавайтесь. freecodecamp — отличное место для обучения новичков. Позвольте мне также поделиться ссылкой с вами. learn.freecodecamp.org

Ответ №2:

Я не уверен, что вы получаете $gray-medium в качестве цвета, но изменение этого на серый заставит работать цвет фона. Возможно, ваш приоритет стиля отключен, и стили для a тега перезаписывают их. Создание стилей для a тега позволит успешно оформить ссылки в вашем HTML.

 .unpublished {
  background-color: gray !important;
  color: red;
}

//also tried this
.tab-content {
  .unpublished {
    background-color: green !important;
    color: red;
  }
}

a {
  color: green;
}

 <ul class="nav nav-tabs course-tabs" id="course" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
                <span class="fas fa-info-circle"></span>
                About this course space</a>
        </li>
    </ul>

 <div class="tab-content unpublished">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="unpublished">
                <span class="fas fa-times-circle"></span>Course space is not published
                <a href="#">Publish course space in Canvas arrow-right</a>
            </div>
       </div>
</div>

1. серый-средний — это цвет, определенный в коде, изменение его на любой другой цвет все равно не работает

2. У меня это тоже работает … возможно, проблема в правиле начальной загрузки с !important перезаписью вашего. Я не в первый раз вижу, как Bootsrap делает такое дерьмо (извините за ругань). Сначала проверьте отладчик, чтобы увидеть, изменено ли ваше свойство CSS, и используйте его поиск для фильтрации по свойству, чтобы вы могли видеть, где находится правило, которое перезаписывает ваше. Вы всегда можете попробовать изменить классы начальной загрузки на пользовательские, чтобы проверить, сохраняется ли проблема, или протестировать свой код на наличие синтаксических ошибок, таких как открытые теги и тому подобное. Извините, но я не могу вам больше помочь, не видя кода.

Ответ №3:

Если вы хотите оформить первый div, вам следует использовать это.

 .tab-content .unpublished {
    background-color: green !important;
    color: red;
}

Ответ №4:

HTML

  <ul class="nav nav-tabs course-tabs" id="course" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
            <span class="fas fa-info-circle"></span>
            About this course space</a>
    </li>

</ul>

css

  .unpublished {
      background-color: grey;
      color: red;
    }