如何用CSS或jQuery样式的第一个和最后一个li？ [英] How to style the first and last li with CSS or jQuery?

问题描述

如何用CSS创建第一个（顶层） li 和最后一个（顶层） li 或jQuery？

How can I style the first (top level) li and the last (top level) li with CSS or jQuery?

我使用CSS设置第一个 li 样式， c $ c> li ，所以我如何才能让它只风格化 li

I am using CSS to set the first li style but it is also styling the first li in each secondary level ul, so how can I get it to style only the li with Main 1 in it and the last one with Main 6 in it?

这是我的代码：

<style>
ul li:first-child
{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
</style>

和HTML：

<div id="nav">
    <ul>
        <li><a href="#">Main 1</a>
            <ul>
                <li><a href="#">Sub 1a</a></li>
                <li><a href="#">Sub 1b</a></li>
                <li><a href="#">Sub 1c</a></li>
            </ul>
        </li>
        <li><a href="#">Main 2</a>
            <ul>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Main 3</a>
            <ul>
                <li><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li><a href="#">Main 4</a>
            <ul>
                <li><a href="#">Sub 4</a></li>
            </ul>
        </li>
        <li><a href="#">Main 5</a></li>
        <li><a href="#">Main 6</a>
            <ul>
                <li><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>   
</div>

推荐答案

您必须使用 immediate子选择器：

ul > li:first-child

此规则将影响< li& / code>，紧接在< ul> 之前。这应该适用于jQuery和css。并非所有浏览器都可以使用伪类（特别是 last-child 。

This rule will affect an <li> that is only immediately preceded by a <ul>. This should apply to both jQuery and css. Not all browsers can use the pseudo classes (especially last-child.

这篇关于如何用CSS或jQuery样式的第一个和最后一个li？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！