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

或者你可以创建一个新的样式类'contentClass'，它包含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)") ??

jQuery / javascript - 为特定元素赋予样式

3 个答案: