html - 在其他标签的多级中选择某一类型的第一个标签

Question

我需要将样式应用于特定类型标签内特定类型的每个子标签，但我不知道正确的 CSS 选择器组合。

例如，在此标记中，我想选择所有显示 Select me 的标签并将它们变为蓝色，但不选择任何其他标签:

<i>Don't select me</i>

<div>
    <p>
        <i>Select me</i>
    </p>
    <p>
        <i>Don't select me</i>
    </p>
</div>

<div>
    <p>
        <b>Don't select me</b>
    </p>
    <p>
        <i>Select me</i>
    </p>
</div>

我试过这个:

div i:first-of-type {
    color: blue;
}

但它会选择 div 中的所有 i 标签。

我也试过

div p:first-of-type i:first-of-type {
    color: blue;
}

但显然不会得到第二个 Select me 因为它在第二个 p 标签中。

这是一个演示:http://jsfiddle.net/eEHvp/

Answer 1

用 CSS3 做不到你想做的事 selectors .

first-of-type和 first-child等是相对于他们的直接 parent 。