html - 主图文本属性

Question

我正在创建一个带有英雄形象的网站。我已将 CSS 中的文本设置为居中。我想在图像中创建另一段文字。然而，这一次，在左下角。我已经将附加文本添加到 div 中，但它当然只是获取我在 CSS(中央)中设置的信息。无论如何要在 CSS 中为这段新的文本创建另一个标签，我可以在其中设置我选择的属性？

这是我的html

<div class="hero-image">
     <div class="hero-text">
        <p class="firsthead">test 1</p> <!--The centre text-->
        <p class="secondhead">test 2</p> <!--The centre text-->
        <p class="thirdhead">test 2</p> <!--The part I want to change-->
     </div>
  </div>

这是我的 CSS

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

我对网站编码还很陌生，因此非常感谢您的帮助。我就是想不通。

谢谢。

Answer 1

所以，如果我理解正确的话，您只是希望能够在 thirdhead <div> 上设置更多/不同的规则。 .正确的？如果是这种情况，那么您只需添加一个新的 CSS block 即可:

.thirdhead {
   ...
}

如果您想覆盖 .hero-text 中以前的样式 block ，新.thirdhead block 需要在后面。在 CSS 中，靠近页面末尾的样式优先。