如何仅更改某些文本的样式？答案

【问题标题】：How do I change the style for only certain text?如何仅更改某些文本的样式？
【发布时间】：2019-05-16 04:24:48
【问题描述】：

当我尝试使用 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>

我希望“我是普通文本”是普通文本，而“我是白色文本”保持白色。如何区分这些？

【问题讨论】：

标签： html css styles

【解决方案1】：

由于你已经为 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>

【讨论】：

【解决方案2】：

这很容易。你只需要根据类创建一个样式。

有 3 种常用方法可以将标签与您的样式联系起来。

第一个和你一样。一种适用于所有 h1 标签的样式。

其次是标签的 ID：对于这个，您需要在样式名称之前添加#。它看起来像这样

#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>

【讨论】：

【解决方案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>

谢谢

【讨论】：

【解决方案4】：

CSS 中的 h1 选择器将应用于 DOM 中的所有 h1。相反，请尝试使用伪类选择器：

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

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

【讨论】：

【解决方案5】：

<!-- 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>

【讨论】：

【解决方案6】：

 .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>

【讨论】：