Как изменить стиль только для определенного текста?

Question

Когда я пытаюсь изменить свойства текста с помощью CSS, кажется, что он меняет весь текст.

Я пытался поместить CSS в разные div и стили.

<!-- CSS -->
<style>
h1 }
color; #fffff
}
</style>

<!-- HTML -->
<h1>Hey Guys, I'm White Text!</h1>

<h1>Hey Guys I'm Normal Text!</h1>

Я ожидал«Я нормальный текст» - обычный текст, а «Я белый текст» остается белым.Как я могу их дифференцировать?

Answer 1

 .blue
  {
    color: blue;
  }
  .red
  {
    color: red;
  }

<p> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna <span class="blue">blue</span> Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <span class="red">red</span> sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

<!-- inline (html ) -->
<p style="color: red"> I'm red (CSS STYLE FOR INLINE ) </p>
<!-- FOR DOCUMENT(INSIDE THE HTML PAGE - WITHIN <STYLE></STYLE> TAG ) LEVEL -->
<style type="text/css">.blue{ color: blue;}</style>
<h2>I'M BLUE. BY DOCUMENT LEVEL STYLE</h2>

Answer 3

вы можете различить, добавив class или id к тегу H1.пример:

<!-- CSS -->
<style>
h1.white {
color; #fffff
}
</style>

<!-- HTML -->
<h1 class="white">Hey Guys, I'm White Text!</h1>

<h1>Hey Guys I'm Normal Text!</h1>

спасибо

Answer 4

Поскольку вы указали стиль для тега h1, стиль обоих операторов изменится.Попробуйте указать класс для тега, а затем написать свой CSS.

<!-- CSS -->
<style>
.test{
color: #ffffff;
}
</style>

<!-- HTML -->
<h1 class="test">Hey Guys, I'm White Text!</h1>

<h1>Hey Guys I'm Normal Text!</h1>

Answer 5

Это довольно легко.Вам просто нужно написать стиль, который зависит от класса.

Существует 3 распространенных способа связать тег с вашим стилем.

Первый способ такой же, как и у вас.Стиль, который подходит ко всем тегам h1.

Второй - по идентификатору тега: для этого вам нужно добавить # перед названием стиля.Это будет выглядеть так:

#ThisStyleWillBePassedById { 
Color: #ffffff;}

Третий - по классу тега (это наиболее распространенный способ): для этого вам нужно добавить.перед названием стиля.Это будет выглядеть так

.ThisStyleWillBePassedByClass { 
Color: #ffffff;}

Тогда ваш HTML будет выглядеть так

<h1 class="ThisStyleWillBePassedByClass">Hey Guys, I'm White Text!</h1> 


<h1 id="ThisStyleWillBePassedById">Hey Guys I'm Normal Text!</h1>

Answer 6

Селектор h1 в вашем CSS будет применяться ко всем h1 в DOM.Вместо этого попробуйте селектор класса psudeo:

h1:first-of-type {
color; #fffff
}

См. https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type