嵌套設計的div

Question

請原諒我，我的網絡編程能力是相當有限，這使得即使google搜索困難的話題，因爲我不知道正確的條款..

反正我的問題，（這我肯定會措辭怪異，因爲我真的不知道如何談論這個）是：

有沒有什麼辦法可以用html + css實現這個pseduocode？

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'rope'圖像，然後垂直打印一些文本。我無法將所有這些通常放在一個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> 

我沒有測試過這一點，但我相信這是軌道上你正在尋找。