Question

所以我一直在用first-child尝试所有这些东西，所有东西都没有，但似乎都没有。如果我有这样的div设置：

<div class="content">
    <div class="thing">
        abd
    </div>
    <div class="thing">

    </div>
    <div class="thing">
        123
    </div>
    <div class="thing">
        <li class="list" goal="target">
            1
        </li>
    </div>
    <div class="thing">
        <li class="list">
            2
        </li>
    </div>
    <div class="thing">
        <li class="list">
            3
        </li>
    </div>
    <div class="thing">
        <li class="list">
            4
        </li>
    </div>
</div>

哪个css行只能定位li .content中的第一个div元素（具有属性goal="target"的<}} < /强>

现在这可能相当混乱，在第一个包含一个div之前，可能会有0到10 li s之间没有first-child。

我几乎尝试了li的任何内容，但它总是针对每一个div，因为它们位于{{1}}中。

here is a jsfiddle if you want to try things

Answer 1

在CSS中，格式为grandparent parent element child ... :nth-child为您提供指定数字的元素，因此对于您的情况

.content .thing:nth-child(4) li {
   /* CSS goes here */
}

在您的示例中，.content是祖父母，.thing（第四个）是父母，当然li是元素。需要空格来区分CSS中的级别。

Here is a working jsFiddle

修改如果没有硬编码，就不可能选择第一个li，无论父母是谁还是没有javascript。

这是一个jQuery修复：

$('.content').find("li").eq(0).css({ /* CSS goes here */});

这是一个直接的javascript修复：

var elems = document.getElementsByTagName('li')[0];
elems.style.property="value";

Answer 2

首先确定，goal是无效的属性，因此您不应该使用它。如果您需要自定义属性，则应使用data-attributes

为了按属性定位元素，您应该使用attribute selector，以下选择器可以使用。

li[goal="target"]{

    /* Your styles go here.*/    

}

css在许多div的div中定位第一个li

2 个答案: