的jQuery/JavaScript的 - 給一個樣式應用到特定元素

Question

假設我有3頁如下：

第1頁：

<div id="content"> 
    <div id="red"></div> 
</div> 

第2頁：

<div id="content"> 
    <div id="blue"></div> 
</div> 

第3頁：

<div id="content"> 
    <div id="green"></div> 
</div> 

這3頁是在同一個模板，所以如果我加

#content { 
    margin-top: 10px; 
} 

所有頁面都會應用這種風格，如果我只想把這種風格放到第3頁，我該怎麼做？

通常，我們使用$('#content > #green').css(...)指向一個元素，但是我們可以使用類似$('#content < #green')的指向一個反轉元素並給它一些樣式嗎？

Answer 1

您可以使用：

$('#green').parent().css(...); 

如果你想完全具體的，你可以這樣做：

$('#green').parent('#content').css(...); 

Answer 2

或者你可以創建一個新的樣式類「內容類」持有的樣式id =「content」的元素，並將樣式類應用於紅色，綠色和藍色。通過這種方式，內容變成了一個沒有樣式的抽象容器，實際的樣式被移動到應該的位置。

所以在樣式表：

.contentClass { 
    /* Your content styles here /* 
} 

並在您的網頁：

<div id="content"> 
    <div id="red" class="contentClass"></div> 
</div> 

<div id="content"> 
    <div id="green" class="contentClass"></div> 
</div> 

<div id="content"> 
    <div id="blue" class="contentClass"></div> 
</div> 

Answer 3

您是否嘗試過$("#content eq(index of element)")？