的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)")？