如何为垂直文本赋予 2 种不同颜色的字体，以便文本 1 和文本 2 在一个“div 类”中？

Posted 2023-03-07

【中文标题】如何为垂直文本赋予 2 种不同颜色的字体，以便文本 1 和文本 2 在一个“div 类”中？

【英文标题】：How to give 2 different colours of the font to the vertical text, in order to text 1 and text 2 was in one "div class"?

【发布时间】：2016-11-13 07:29:02

【问题描述】：

两个文本保存在“背景颜色：蓝色”上以供测试。 我有两个“div 类”：

1)vertical-text1（文字颜色--->白色）

2）vertical-text2（文字颜色--->黄色+字体粗细：粗体）

我的代码：

<div class="video_info">
    <div class="vertical-text1">text 1</div>
    <div class="vertical-text2">text 2</div>
</div>


.video_info

    position: fixed;
    left: 30px;
    top: 70%;


.vertical-text1

    transform: rotate(-90deg);
    color: white;
    background-color: #0000ff;
    position: absolute;
    left: -190px;
    top: -215px;
    width: 400px;


.vertical-text2

    transform: rotate(-90deg);
    color: yellow;
    font-weight: bold;
    background-color: #0000ff;
    position: absolute;
    left: -40px;
    top: -350px;
    width: 100px;

如何为垂直文本赋予 2 种不同颜色的字体，以使文本 1 和文本 2 在一个“div 类”中？

【问题讨论】：

你问的不是很清楚..你想要'text 1'和'text 2'不同的文本颜色但没有在任何html元素中单独设置它们吗？

是的，只在一个 div "vertical-text1" 中。两个 div "vertical-text1" 和 "vertical-text2" 用于在 CSS 中更多地标出一个位置，并且样式正在重复。

【参考方案1】：

我不认为你可以拥有两个具有不同样式的元素而不使它们以某种方式有所不同。您可以做的是将您的通用样式移到一个类中，并保留单独的样式，为每个元素分开（使用 ID），因此没有重复的代码。

<div class="video_info">
    <span id="vertical-text1" class="vertical-text">text 1</span>
    <span id="vertical-text2" class="vertical-text">text 2</span>
</div>

.video_info

    position: fixed;
    left: 30px;
    top: 70%;


.vertical-text 
    transform: rotate(-90deg);
    background-color: #0000ff;
    position: absolute;


#vertical-text1

    color: white;
    left: -190px;
    top: -215px;
    width: 400px;


#vertical-text2

    color: yellow;
    font-weight: bold;
    left: -40px;
    top: -350px;
    width: 100px;