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

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

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

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

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

Answer 3

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

您可以通过向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 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>

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

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

6 个答案: