html - 如何为垂直文本提供 2 种不同颜色的字体，以便文本 1 和文本 2 在一个 "div class"中？

Question

为了测试，在“background-color: blue”上保存了两条文本。我有两个“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 类”中？

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