選擇不低於給定元素的元素

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