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 demo

Answer 2

如果您要为p标记的第一次出现着色。并且你不知道它到底在哪里，我认为唯一的方法是使用javascript。

<强>的Javascript ：

var blue = document.getElementsByClassName('blue')[0];
var p = blue.getElementsByTagName('p')[0];
p.className = 'blueContent';

<强> CSS

.blueContent {
    background-color:#2E9AFE;
}

<强> Working Fiddle

Answer 3

请尝试

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

Answer 4

你能用jQuery来解决这个问题吗？这是一种方法：

$(document).ready(function(){
    $('.blue').each(function(index, obj){
        var $p = $(this).find('p').eq(0);
        $p.css('background-color', '#2e9afe');
    })
});

fiddle

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

4 个答案: