изменить цвет для одного слова

Question

У меня есть параграф с текстом. Как мне изменить цвет только одного слова в этом параграфе? Моя попытка закончить тем, что я изменил цвет «есть», но также поместил «есть» в свою строку.

<div class="myHeader">
   <h1>This is my heading</h1>
   <h2>This <div class="test">is</div> the paragraph</h2>
</div>

Файл CSS:

.myHeader {
  text-align: center;
  font: normal Helvetica, Arial, sans-serif;
  color: #ffffff;  
}

.test{
color: red;
}

Answer 1

Вместо того, чтобы .test быть div, используйте что-то вроде span.

Он получает свою собственную строку, потому что div является блочным элементом, в то время как span и т.п. являются встроенными.

Answer 2

У вас есть два варианта. Вы можете либо изменить div на span, как отмечено в заметках, либо изменить правило стиля на

.test{
  display:inline;
  color: red;
}

эффективно обрабатывает div уровня блока как диапазон.

Answer 3

Что я хотел бы сделать для <div class="test">is</div>, так это сделать <div id=test>is</div>, затем изменить CSS на

#test{
color:red;
}

надеюсь, это поможет:)