选择不低于给定元素的元素

Question

我正在用CSS选择器挣扎。我需要一个css规则，它返回所有输入字段，但是那些低于特定字段的字段。

这是一个HTML代码示例：

<div id="container"> 
    <div> 
     <input name="apple"> 
     <div class="sub"> 
      <input name="banana"> 
      <input name="grapefruit"> 
     </div> 
    </div> 
</div> 

口语规则是：

给我所有输入字段下面#container但不是那些与类名“子”的元素下面。

该html代码是动态的，所以我不能依靠简单的子选择器，如>。我已经拨弄:not()选择器，但目前还没有运气。

注：我使用jQuery进行元素选择。

Answer 1

你应该看到这样的东西;

$('input:not(.sub input)') 

:not选择器不包括低于sub的输入元素。你也可以使用这样的东西，可能会更清楚：

$('input').not($('.sub').find('*')); 

Answer 2

$("#container input").filter(
        function(){ 
           return $(this).parent().hasClass("sub")==false 
           } 
          ).css('background-color','red'); //make those elements - RED