Question

我有以下标记：

<footer>
    <div>
        <ul>
            <li>content</li>
            <li><a target="_blank" href="#">Link</a></li>
            <li><a target="_blank" href="#">Link</a></li>
            <li><a target="_blank" href="#">Link</a></li>
        </ul>
    </div> 
    <div>
        <ul>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
        </ul>
    </div>
</footer>

如何在不将自定义ID和类应用于HTML的情况下，仅使用CSS定位第二个<ul>？

Answer 1

footer > div:last-child > ul { /*styles*/ }

Answer 2

试试这个：

＆＃13;

footer div:nth-child(2) ul {
    background-color: green; /* For success */
}

＆＃13;

<footer>
    <div>
        <ul>
            <li>content</li>
            <li><a target="_blank" href="#">Link</a></li>
            <li><a target="_blank" href="#">Link</a></li>
            <li><a target="_blank" href="#">Link</a></li>
        </ul>
    </div> 
    <div>
        <ul>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
        </ul>
    </div>
</footer>

＆＃13;

那就是说，只要有可能，我会鼓励课程/ ID路线，因为虽然它可能很乱，但它也允许你重新排列项目。稍后回到网站时进行故障排除也会稍微容易一些，因为从标记中可以清楚地了解它们的样式。

Answer 3

在此特定情况下footer div:nth-of-type(2) ul或footer div:last-of-type ul

http://codepen.io/anon/pen/ZBoONm

Answer 4

完成可能的解决方案的收集：

footer div:nth-of-type(2) ul {
    color: red;
}

小提琴：https://jsfiddle.net/9uuqub2k

css - 针对特定的非子女后代

4 个答案: