定位第一级< li>而不是嵌套< li> [英] Target first level <li>s and not the nested <li>s

问题描述

我有以下HTML：

 < ul& 
< li> A 
< ul> 
< li>子节< / li> 
< / ul> 
< / li> 
< li> B 
< ul> 
< li>子节< / li> 
< / ul> 
< / li> 
< li> C 
< ul> 
< li>子节< / li> 
< / ul> 
< / li> 
< / ul> 
 

使用jQuery，如何定位< li>

例如，我需要将粗体字体悬停在< li> code> s用字母A，B和C，但是没有该字体样式应用于嵌套的< li>

）。

这是一个初始的jsfiddle DEMO

编辑 -

不需要jQuery，这可以使用CSS来完成。

以下是更新的 DEMO

EDIT - 以下是 更加清晰的演示 ：

感谢，

解决方案

有一个容器< div& ，并使用> 选择器。假设你的容器div的类是myclass：

  .myclass ul li {
 ...这将影响两个层次的李。 
} 
 
 .myclass> ul> li {
 ...这只会影响第一级。 
} 
 
 .myclass> ul> li> ul> li {
 ...这只会影响第二级。 
} 
  

注意：> selector在用作CSS选择器时在IE6及以下版本中不起作用。它在所有其他浏览器中工作，包括IE7和IE8，当在JQuery中使用时，它在所有jQuery支持的浏览器，包括IE6。

I have the following HTML:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

With jQuery, how do I target the FIRST level of <li>s?

For example, I need to make the font bold on hover to the <li>s with the letters A, B and C, but NOT have that font style applied to the nested <li>s (with the name subsections).

Here's an initial jsfiddle DEMO if you'd like to use it.

Thanks.

EDIT--

Solution:

CHILD SELECTORS, that's the answer.

No need for jQuery, this can be done using CSS.

Here's the updated DEMO

EDIT-- Here's a more clear demo

Thanks,

解决方案

Have a container <div> with a class, and use the > selector. Lets say your container div's class is "myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Note: the > selector does not work in IE6 and below when used as a CSS selector. It does work in all other browsers though, including IE7 and IE8, and when used in JQuery, it works in all browsers supported by jQuery, including IE6.

这篇关于定位第一级< li>而不是嵌套< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！