Target first level s and not the nested s

问题:

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,

回答1:

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.

回答2:

You could do this:

$('ul > li:not(:has(ul))');

But it would be better to give your top level <ul> an ID so you can target it with a valid CSS selector:

$('#topUL > li')

回答3:

CHILD SELECTORS, that's the answer.

No need for jQuery, this can be done using CSS. Target the first-level li elements with a selector:

ul > li {
    font-weight: bold;
}

And then undo the styling for deeper li elements:

ul > li li {
    font-weight: normal;
}

Here's the updated DEMO.

回答4:

I would set one rule to target all li elements and then another to override this that targets nested li elements.

li{font-weight:bold;}
ul ul li{font-weight:normal;}

Nested li elements would be normal weight and top level would be bold.

回答5:

I don't think your problem has been completely addressed (although there has been some good attempts). Your example problem deals with applying a style to a parent and preventing the child from inheriting the style -- which is a CSS problem.

You could target the list items by knowing the parent element (as some have noted). Then add a class on hover.

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

And your CSS would have the class for the parent, and a negating style for the children:

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }