css选择具有特定标签的第一个元素

Question

我正在尝试制作一个css类,它会为第一个找到的具有特定标签的元素提供背景颜色.

这个CSS

.blue p:first-of-type {
    background-color:#2E9AFE;
}

作品例如1:

<div class="blue">
    <p>element 1</p>
    <p>element 2</p>
    <p>element 2</p>
</div>

不适用于示例2:

<div class="blue">
    <ul>
        <li><p>Parent 1</p>
            <ul>
                 <li><p>Element 1.1</p></li>
                <li><p>Element 1.2</p></li>
            </ul>
        </li>
    </ul>
</ul>

在示例2中,带有标记的第一个元素p是Parent 1,但是我的代码为每个元素着色.为什么？

小提琴:http://jsfiddle.net/alexix/CYX32/1/

Answer 1

所述:first-of-type选择器选择所述第一载其父元素中的类型.在每种情况下,它p是li元素中的第一个类型.

如果您要选择的第一类p中的第一类li中的第一类的ul你将不得不使用以下的选择:

.blue > ul:first-of-type > li:first-of-type > p:first-of-type {
    background-color:#2E9AFE;
}

JSFiddle演示.