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

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'});

这将返回第一个具有 class 的 div task，找到所有子元素h4并应用您想要的样式。

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

.FirstTask {
    color:blue;
}

并应用它：

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

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

编辑

澄清，因为显然用途.first()是未知的......

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

也许文档可以比我解释得更好。

如果不这样做，这里有一个 jsFiddle 来展示它的工作原理。