blocks|key|677069|text|您必须使用immediate+child+selector|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|677070|ul+>+li:first-child|code-block|syntax|javascript|677071|此规则将影响仅紧跟在<ul>之前的<li>。这应该同时适用于jQuery和css。并不是所有的浏览器都可以使用伪类(尤其是last-child。|style|CODE|677072|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/child-and-sibling-selectors/^0|5|O|0|0|0|A|4|H|4|1P|A|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]|$A|12|B|13|K|L]|$A|14|B|15|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>You have to use the <a href="http://css-tricks.com/child-and-sibling-selectors/">immediate child selector</a>:</p>

<pre><code>ul &gt; li:first-child
</code></pre>

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


blocks|key|677082|text|<style>
++++ul+>+li:first-child,+ul+>+li:last-child
++++{
++++++++width:+800px;
++++++++border:1px+solid+#fc5604;+border-top-width:thin;+(2px)
++++}
</style>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|677083|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;style&gt;
    ul &gt; li:first-child, ul &gt; li:last-child
    {
        width: 800px;
        border:1px solid #fc5604; border-top-width:thin; (2px)
    }
&lt;/style&gt;
</code></pre>


blocks|key|462009|text|如果你想使用jQuery，你可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|462010|$('#nav+>+ul+li').first().css('background-color',+'red');
$('#nav+>+ul+li').last().css('background-color',+'red');|code-block|syntax|javascript|462011|%5E应该可以做到这一点。|462012|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you'd like to use jQuery you could use the following:</p>

<pre><code>$('#nav &gt; ul li').first().css('background-color', 'red');
$('#nav &gt; ul li').last().css('background-color', 'red');
</code></pre>

<p>^ should do the trick. </p>


blocks|key|677195|text|第一项非常简单，我看到您已经关闭了:first-child。:last-child也做同样的事情，但它在IE中的支持有限。但是，如果列表项的数量是固定的(在我看来)，您实际上可以仅使用CSS来定位最后一项。观察！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|677196|li+%2B+li+%2B+li+%2Bli+%2B+li+%2B+li+{+background:pink;+}|code-block|syntax|javascript|677197|这里有一把小提琴：http://jsfiddle.net/jgRZQ/1/|677198|%2B选择器主要针对紧邻的下一个同级(如果它与您的类型匹配)，所以这是一个从最后一个开始计数的问题。是的，这在IE7中是有效的。:)|677199|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jgRZQ/1/^0|H|C|U|B|0|0|9|S|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>The first item is quite simple, and I see you already have the <code>:first-child</code> down. <code>:last-child</code> does the same, but it has limited support in IE. However, if the number of list items are fixed (which it seems to me), you can actually target the last item with CSS alone. Observe!</p>

<pre><code>li + li + li +li + li + li { background:pink; }
</code></pre>

<p>Here's a Fiddle: <a href="http://jsfiddle.net/jgRZQ/1/" rel="noreferrer">http://jsfiddle.net/jgRZQ/1/</a></p>

<p>The <code>+</code> selector basically targets the immediate next sibling (if it matches your type), so it's a matter of counting your way to the last. And yes, this works in IE7. :)</p>


blocks|key|677238|text|为第一个ul标记指定一个类名。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|677239|<div+id="nav">
++++<ul+class="list">
++++++++<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>...........
...................................|code-block|syntax|javascript|677240|然后，您可以像下面这样使用CSS：|677241|<style>
ul.list+>+li:first-child{
width:+800px;
border:1px+solid+#fc5604;+border-top-width:thin;+(2px)
}
ul.list+>+li:last-child{
width:+800px;
border:1px+solid+#fc5604;+border-top-width:thin;+(2px)
}
</style>|677242|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Give a class name for first ul tag.</p>

<pre><code>&lt;div id="nav"&gt;
    &lt;ul class="list"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Main 1&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 1a&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 1b&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 1c&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;...........
...................................
</code></pre>

<p>Then you can use like the following CSS:</p>

<pre><code>&lt;style&gt;
ul.list &gt; li:first-child{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
ul.list &gt; li:last-child{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
&lt;/style&gt;
</code></pre>


<p>How can I style the first (top level) <code>li</code> and the last (top level) <code>li</code> with CSS or jQuery?</p>

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

<p>Here is my code:</p>

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

<p>and HTML:</p>

<pre><code>&lt;div id="nav"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Main 1&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 1a&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 1b&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 1c&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Main 2&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Main 3&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Main 4&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 4&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Main 5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Main 6&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub 6&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;   
&lt;/div&gt;
</code></pre>


How to style the first and last li with CSS or jQuery?

jQuery

如何使用CSS或jQuery设置第一个(顶层) li和最后一个(顶层) li的样式？我使用CSS来设置第一个li样式，但它也设置了每个二级ul中的第一个li的样式，那么如何才能让它只设置包含MAIN1的li和包含MAIN6的最后一个样式呢？下面是我的代码：<style>ul li:first-child{width: ...

问如何使用CSS或jQuery设置第一个和最后一个li的样式？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS或jQuery设置第一个和最后一个li的样式？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS或jQuery设置第一个和最后一个li的样式？
EN