Question

我知道这可能很简单，但我已经尝试过我能想到的所有内容，并且可以在网上找到。

我有一些看起来像这样的HTML。

<div class="shared">
  <div class="task">
    <h4>Title</h4>
    <p>Content</p>
  </div><!--.task-->
  <div class="task">
    <h4>Title</h4>
    <p>Content</p>
  </div><!--.task-->
</div><!--.shared-->

我试图从第一个h4中删除一个样式。

我试过了

.shared h4:first-child{color:blue;}

.shared h4:first-of-type{color:blue;}

$('.shared h4:first').css("color", "blue");

并且它处于一个循环中，因此我无法将类添加到第一个div中。相信我，如果可以，我会的。任何帮助都会很精彩！

Answer 1

听起来您想要更改第一个h4

的.task样式

试一试：

.shared .task h4 {
    color: red;
}
.shared .task:first-child h4 {
    color: blue;
}

Answer 2

你可以这样做：

.shared .task h4 { /* Style of the 1st H4 */ }
.shared .task + .task h4 { /* Styles of 2nd and more */ }

支持CSS2

Answer 3

尝试一下这个：

$('.task').first().find('h4').css({color:'blue'});

这将返回包含类task的第一个div，找到h4的所有子项并应用您想要的样式。

或者更好的是，为CSS创建一个类：

.FirstTask {
    color:blue;
}

并应用它：

$('.task').first().find('h4').addClass('FirstTask');

这种方式更多的职责分离。

修改

澄清因为显然.first()的使用未知......

这只会返回.task的第一个实例，然后在第一个实例下找到h4 。

Perhaps the documentation can explain better than I can.

如果不这样做，here is a jsFiddle to show it works.

从div中的第一个h4中删除样式

3 个答案: