您好，如何在 p 元素中放置不同的颜色？

Posted 2023-02-23

【中文标题】您好，如何在 p 元素中放置不同的颜色？

【英文标题】：Hello, how can I put different colors in a p element?

【发布时间】：2021-11-26 15:04:40

【问题描述】：

<p class="desc-title">
            command activate;<br>
               monke brain: insert code.<br>
               monke html: evolve level 1.<br>
               monke css: evolve level 2.<br>
               monke javascript: evolve level 3.<br>
               monke: web basics complete.<br>
           </p>

抱歉这个菜鸟问题，但我如何才能在单个 p 元素中使用不同的颜色 我想将monke文本颜色更改为红色，将所有其他文本更改为浅蓝色。 谢谢。

【问题讨论】：

添加标签<span>并使用css设置样式

我需要使用类吗？像 ？我还需要将它们分开吗？或者我可以把它放在 p 类样式中？

如果您只想设置monke 单词的样式，则不需要span 类。所以你可以<span>monke</span> 然后在你的css .desc-title spancolor:red;

哦，非常感谢！

【参考方案1】：

.desc-title
  color: lightblue;


.desc-title .monke
  color:red

<p class="desc-title">
    command activate;<br>
   <span class="monke">monke</span> brain: insert code.<br>
   <span class="monke">monke</span> html: evolve level 1.<br>
   <span class="monke">monke</span> css: evolve level 2.<br>
   <span class="monke">monke</span> javascript: evolve level 3.<br>
   <span class="monke">monke</span>: web basics complete.<br>
 </p>

【讨论】：

您不需要 javascript 来执行此操作.....

谢谢你。有点不敢在这里问问题，因为我看到 cmets 关于溢出有时对新用户/菜鸟有毒。

@Sfili_81 刚看到你的 cmets。在看到你的 cmets 之前我已经在编辑了

因为这个答案是正确的只有css解决方案，js解决方案在这种情况下没用

@Sfili_81 是的，你是对的。 CSS就足够了