1

所以我一直在尝试所有这些东西，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 divgoal="target"

现在这可能相当混乱，并且在第一个包含一个之前div没有 a 的任何地方都可以是 0 到 10 秒。li

我已经尝试了几乎任何东西first-child，但它总是针对每一个li，因为它们在divs.

如果您想尝试一下，这是一个 jsfiddle

4

2 回答 2

3

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

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

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

这是一个工作的jsFiddle

编辑如果没有硬编码，就不可能选择第一个li，无论它的父级是谁没有 javascript。

这是一个 jQuery 修复：

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

这是一个直接的javascript修复：

var elems = document.getElementsByTagName('li')[0];
elems.style.property="value";
于 2013-07-26T00:17:19.703 回答
0

好的，首先，goal这是一个无效的属性，所以你不应该使用它。如果您需要自定义属性，您应该使用data-attributes

为了按属性定位元素，您应该在您的情况下使用属性选择器，以下选择器将起作用。

li[goal="target"]{

    /* Your styles go here.*/    

}
于 2013-07-26T00:42:54.383 回答