css - :first-child 具有不同的类名

Question

我有一个 HTML 结构：

<div class="home-view">
     <div class="view-header">Header</div>
     <div class="view-content">Content</div>
</div>

我想为home-view. 在这种情况下，它是view-header，但有时没有标题，并且view-content将是home-view.

第一个项目home-view应该有一些样式。

我一直在尝试.home-view:first-child，但没有运气，因为它的孩子有不同的班级名称（我认为）。有什么建议吗？

score 4 · Accepted Answer

.home-view > *:first-child { background-color:red; }

...将选择第一个子元素的任何类型的第一个子元素。

score 2 · Accepted Answer

由于两个元素都是s 您可以在 .home-view 中div指定第一个div

.home-view div:first-child{
    background: red;
}

工作示例：http: //jsfiddle.net/7cNZS/

score 1 · Accepted Answer

.home-view > div:first-of-type{ background-color:red; }

:first-of-type 选择器匹配其父元素的特定类型的第一个子元素。

score 0 · Accepted Answer

您对前面的回答做出了回应，您只希望直接子元素被设置样式，而不是它们下面的子元素。

因此，我将调整这些答案并给您一个满足该要求的答案：

.home-view>div:first-child{
    background: red;
}

这里的区别是和而不是空格>之间的选择器。这迫使它只选择的直接子元素，而不是树下更远的 div，而它们之间的空格会告诉它选择树下任何匹配的子元素。.home-viewdiv.home-view

希望有帮助。

score -3 · Accepted Answer

-3

试试这个：

$('.home-view').children().eq(0);

于 2013-07-18T08:38:48.823 回答

5 回答 5