Как применить CSS, используя условие? - PullRequest
Новая
       1

Как применить CSS, используя условие?

0 голосов
/ 24 января 2019

Я пытаюсь применить этот CSS: 

#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
    font-size: 22px;
    color: white;
}

это хорошо работает, проблема в том, что веб-приложение может установить класс на body с именем white-content, если установлен класс white-content, тогда я не вижу текст h2, потому что цвет white.

Возможно ли сказать css, что вышеуказанная css должна применяться только тогда, когда класс white-content недоступен для body?

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

Ответы [ 3 ]

0 голосов
/ 24 января 2019

Ради этого примера я сжал HTML.

Тест 1: Класс существует на body.h2 текст должен быть по умолчанию черным. 

body:not(.white-content) #calendar-page h2 {
  font-size: 22px;
  color: white;
}
<body class="white-content">
  <div id="calendar-page">
    <h2>My Header</h2>
  </div>
</body>

Тест 2: Класс не существует в body.h2 текст должен быть белым. 

body:not(.white-content) #calendar-page h2 {
  font-size: 22px;
  color: white;
}
<body>
  <div id="calendar-page">
    <h2>My Header</h2>
  </div>
</body>
0 голосов
/ 24 января 2019

, если вы используете 

body.white-content

, что означает одновременно класс «body and white-content».Таким образом, вы можете использовать: 

#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
   font-size: 22px;
   color: white;
}
body.white-content #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
   color: black
}

Поэтому, когда тело имеет .white-содержимое, оно добавляет правило css.

Подробнее о https://www.w3schools.com/cssref/css_selectors.asp

0 голосов
/ 24 января 2019

да, это возможно при использовании DOM-манипуляции с javascript:

HTML: 

<div id="div01" style="background-color: white">abc</div>

JavaScript: 

if(div01.style.backgroundColor == "white")
    {document.getElementById("div01").style.color = "black";}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...