Селектор CSS не применяется к внутреннему элементу в Bulma Hero

patrickjm спросил: 13 июня 2018 в 05:26 в: html

Итак, я пытаюсь настроить компонент Hero из Bulma. Когда я пытаюсь настроить селектор CSS на элемент внутри него, он, похоже, не применяется. При тестировании я могу установить font-size в 100pt и color: red без эффекта. Вот моя работа:

index.css

#headline-container {
    border-bottom: 2px solid #00aff4;
    background: radial-gradient(ellipse at center, rgb(60, 197, 255) 0%, rgb(0, 181, 255) 100%);
};#titley {
    font-size: 28pt;
    font-weight: 300;
    color: red;
    font-family: "Roboto Condensed", Arial Narrow, Arial, sans-serif;
    text-align: right;
    vertical-align: middle;
}

index.html

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" integrity="sha256-zKA1Bf41O96+gJSlkn/Bh2HATW/OhwkApPlYTp3B5O8=" crossorigin="anonymous" />
  <link rel="stylesheet" href="index.css" />
</head><body>
  <div class="hero is-large is-info" id="headline-container">
    <div class="hero-body">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <div id="titley">Here's my big fancy headline.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body></html>

Тег #titley на внутреннем div не имеет никакого эффекта, но это не только идентификатор. Я пробовал много разных селекторов, поэтому на данном этапе мне интересно, есть ли какая-то явная или очевидная ошибка, которую я делаю.

Инструменты разработчика Chrome не показывают никакой информации о моем #titley, когда я выбираю элемент.

Любые советы будут оценены.


2 ответа

Есть решение
aldi ответил: 13 июня 2018 в 05:44

У вас есть точка с запятой при закрытии #headline-container.
Попробуйте этот CSS:

#headline-container {
  border-bottom: 2px solid #00aff4;
  background: radial-gradient(ellipse at center, rgb(60, 197, 255) 0%, rgb(0, 181, 255) 100%);
}#titley {
  font-size: 28pt;
  font-weight: 300;
  color: red;
  font-family: "Roboto Condensed", Arial Narrow, Arial, sans-serif;
  text-align: right;
  vertical-align: middle;
}

Кроме того, я предлагаю использовать container вместо класса level. Класс уровня лучше всего подходит с помощью элемента nav, а не элемента div.

patrickjm ответил: 13 июня 2018 в 12:51
Спасибо, у меня есть плагин для преобразования CSS-in-JS в CSS, и, я думаю, я пропустил точку с запятой. Чувство глупости.
patrickjm ответил: 13 июня 2018 в 12:52
Я ищу лучший способ показать очень большое изображение на правой стороне Героя и понять, что уровень может быть хорошим способом сделать это. Столбцы не выходили так хорошо
aldi ответил: 14 июня 2018 в 06:40
@patrickjm Проверьте один из моих шаблонов, который выполняет аналогичную работу: aldi.github.io/awesome-bulma-templates/templates/cv.html. Вы можете использовать два divs с классами tile is-6
Jacob-Jan Mosselman ответил: 13 июня 2018 в 05:31

За фигурными скобками находится точка с запятой, еще не может найти ничего другого, что не так. Но поскольку Google не отображает ее, это должно быть так.

Дополнительное видео по вопросу: Селектор CSS не применяется к внутреннему элементу в Bulma Hero

How to Create Tiles in Bulma

Топ- 5 Frontend фреймворков по версии Github

1 - Creare un template con Bulma - Navbar e Hero Image