html - div中的嵌套设计

Question

请原谅，因为我在 Web 编程方面的能力非常有限，这使得即使在 google 上搜索主题也很困难，因为我不知道正确的术语..

无论如何，我的问题(我确信我的措​​辞会很奇怪，因为我真的不知道如何谈论这个问题)是:

有什么办法可以用html + css实现这个伪代码吗？

CSS文件:

#ropeimage {
    background-repeat:repeat-x;
    background:url(images/rope.png);
}

#ropetext {
    <div id="ropeimage">
   /* some text properties */
}

然后在html文件中

<div id="ropetext">hello</div>
<div id="ropetext">there</div>

我问的原因是，即使我知道我可以做类似的事情

<div id="ropetext"><div id="ropeimage">hello</div></div>
<div id="ropetext"><div id="ropeimage">there</div></div>

如果我知道我总是需要这个，为什么不把它藏在 css 文件中。

如果有人好奇，我想做的是构建一个 div，它将重复 x 一个“绳索”图像，然后垂直打印一些文本。我通常不能将所有这些都放在一个 div 中，因为绳子的背景图像会在文本下方重复，所以我需要两个 div，以便图像在碰到文本 div 时立即停止重复。

a crude picture explaining what im trying to do

Answer 1

我相信你不想使用 id 而想使用 class。

所以你的 CSS 看起来像这样:

.ropetext {
    /* properties */
}

然后在您的 HTML 中:

<div class="ropetext"></div>

类和 ID 之间的区别在于您只想将 ID 用于一个 HTML 标记。一个类可以应用于多个标签。

此外，您可以在 CSS 中进行嵌套样式定义:

.rope {
    /* properties defining any rope div in general */
    position: relative;
}

.rope .top {
    /* properties defining the top of the div */
    /* background image stuff goes here */
}

.rope .bottom {
    /* properties defining the bottom of the div */
    position: absolute;
    bottom: 0px;
}

在您的 HTML 中:

<div class="rope">
    <div class="top">
    </div>
    <div class="bottom">
        Hello
    </div>
</div>

我还没有对此进行测试，但我相信这符合您的要求。