tvanpelt Ответов: 2

Какой атрибут, класс или идентификатор я бы использовал для <h3>?

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

У меня есть этот html, и я работаю над CSS, и застрял на втором h3. Что бы я использовал для CSS, так как для первого <h3> есть класс, прикрепленный к нему, и не хочу делать оба <h3> фона серыми. Я не должен менять HTML, только CSS. HTML и CCS ниже:

HTML

<div>
  <h3 id="id1">Red text header!</h3>
  <p class="class1">This paragraph should have a black background and yellow text</p>
  <span class="class1">Black background and white text.</span>
  <span>Blue background and white text.</span>
</div>
<div>
  <h3>Red text header with Grey background!</h3>
  <p>Green text with white background color</p>
  <p id="id2">Green text, white background color</p>
</div>


CSS

/* Your code here: */

#id1 {
  color: red;

}

.class1 {
  color: yellow;
  background-color: black;

}

span {
  background-color: blue;
  color: white;

}
h3 {
  color: red;
  background-color: grey;
}
p.class1 {

}

.class1 {

}

#id1 {

}

#id2 {
  
}



Спасибо за вашу помощь! :-)

Что я уже пробовал:

Я пробовал погуглить этот вопрос, но мне трудно описать google, что я ищу

2 Ответов

Рейтинг:
2

OriginalGriff

Если я попробую ваш код, то он уже не за горами:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
/* Your code here: */
#id1 {
  color: red;
}
.class1 {
  color: yellow;
  background-color: black;
}
span {
  background-color: blue;
  color: white;
}
h3 {
  color: red;
  background-color: grey;
}
p.class1 {
}
.class1 {
}
#id1 {
}
#id2 {
}
</style>
</head>
<body>

<div>
  <h3 id="id1">Red text header!</h3>
  <p class="class1">This paragraph should have a black background and yellow text</p>
  <span class="class1">Black background and white text.</span>
  <span>Blue background and white text.</span>
</div>
<div>
  <h3>Red text header with Grey background!</h3>
  <p>Green text with white background color</p>
  <p id="id2">Green text, white background color</p>
</div>

</body>
</html>
Все, что вам нужно, чтобы отсортировать наш зеленый текст на белом фоне - и так как вы зашли так далеко, это должно быть довольно легко для вас!

Подсказка: вам нужно определить значение по умолчанию для этого абзаца?

Попробуйте здесь: Редактор Tryit В3.6[^]

Richard Deeming

Я думаю, что это серый фон на первом <h3> вот в чем проблема. :)

OriginalGriff

Просто добавить:

п {
зеленый цвет;
цвет фона: белый;
}

И посмотрим, что получится. Оба элемента h3 закрываются до того, как появится зеленый текст.

Richard Deeming

Оба <h3> элементы имеют серый фон. ОП сказал:: "не хочу, чтобы оба фона <h3> были серыми" :)

Edit fiddle - JSFiddle - Code Playground[^]

Рейтинг:
12

Richard Deeming

У вас есть несколько вариантов:

1) Воспользуйся :not чтобы только установить фон на <h3> элементы, которые не имеют id="id1":

h3 {
  color: red;
}
h3:not(#id1) {
  background-color: grey;
}

2) Сброс цвета фона ВКЛ. #id1 на "Отключено", "наследование", или "начальной":
h3 {
  color: red;
  background-color: grey;
}
#id1 {
    background-color: unset;
}
unset - CSS: Каскадные Таблицы Стилей | MDN[^]
inherit - CSS: Каскадные Таблицы Стилей | MDN[^]
initial - CSS: Каскадные Таблицы Стилей | MDN[^]

NB: Ценность unset и initial не будет работать ни в одной версии Internet Explorer.

tvanpelt

Спасибо Вам за ваши решения. Я использовал #id1 для "unset". Я совершенно не знал о возможности "не". Это поможет мне двигаться вперед.