CSS選擇器僅用於定位直接子對象而不是其他相同的子對象

我有一個嵌套的可排序列表，它可以動態添加或刪除項目並且可以嵌套n層深度。在嵌套時，一個新的ul元素被注入到任何li元素被選爲父類中。列表中的初始狀態是像下面這樣：CSS選擇器僅用於定位直接子對象而不是其他相同的子對象

<ul id="parent"> 
    <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li> 
    <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li> 
    <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a> 
     <ul> 
      <li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li> 
      <li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li> 
      <li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li> 
      <li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li> 
      <li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li> 
      <li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>      
     </ul> 
    </li> 
    <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li> 
    <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li> 
    <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>      
</ul>

我使用MooTools的做排序等，並能正常工作，但我有麻煩的排序正確復位位置文本。我嘗試使用的每個CSS選擇器還包括兒童的全部，而不僅僅是屬於列表中的li元素，並且不屬於子列表。假設除了id，position和text之外，所有列表中的每個li元素都與其他元素相同。是否有一個選擇器只能獲得直接的孩子？有沒有另一種方法來做到這一點？

我嘗試了一些孩子選擇喜歡提到的那些：

ul > li會選擇所有 li元素是一個UL的孩子，而不僅僅是眼前的孩子
#parent > li是否與上面相同。

這是我當前正在運行的函數，當一個項目被丟棄時，它不處理排序，它工作正常，只是更新位置。請注意，這也是MooTools的語法：

var drop = function(el){ 
    el.getParents('ul').reverse().each(function(item){ 
     var posCount = 1; 
     item.getElements('li a span[class=position]').each(function(pos){ 
      pos.set('text', posCount); 
      posCount++; 
     }); 
    }); 
}

目前，主要水平變化的任何項目訂單將重新編號1-12的一切，甚至是子列表。更改子列表中的任何項目將爲該列表提供正確的編號，但會導致父列表錯誤地計算編號中的所有子li元素。

我覺得這是一個醜陋的黑客攻擊，但它的工作原理：

var drop = function(){ 
    var ulCount = 1; 
    $$('ul').each(function(item){ 
     if(item.get('id') != 'parent') { 
      item.set('id', 'id-'+ulCount); 
     } 
     var elId = item.get('id'); 
     var posCount = 1; 
     $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){ 
      pos.set('text', posCount); 
      posCount++; 
     }); 
     ulCount++; 
    }); 
}

來源

2009-04-08 VirtuosiMedia

ul > li

只做眼前的孩子。因此，舉例來說，只做你可以使用頂層列表元素：

#parent > li

注：這是不支持IE6。

向後兼容常見的解決辦法是做這樣的事情：

#parent li { /* style appropriately */ } 
#parent li li { /* back to normal */ }

，因爲你必須申請樣式，然後將其關閉（你可能不一定知道什麼是舊的值是它更乏味的），但它是唯一的IE6友好型純CSS解決方案。

編輯：好吧，你有一個MooTools的具體問題。 getElements（）返回所有的後代，而不僅僅是直接的子代。嘗試使用getChildren()。

var drop = function(el){ 
    el.getParents('ul').reverse().each(function(item){ 
     var posCount = 1; 
     item.getChildren("li").getElements("a span[class=position]").each(function(pos){ 
       pos.set('text', posCount); 
       posCount++; 
     }); 
    }); 
}

或類似的東西。

來源

2009-04-08 22:28:04 cletus

謝謝，但MooTools處理IE6問題，所以這不是我所追求的。我正在尋找重置跨度文本的方法，以指示該列表的正確位置，但不包括父或子列表，這是問題出現的地方。 – VirtuosiMedia 2009-04-08 22:40:42

原來的問題沒有回答。：獨生子女只有在獨生子女沒有後代子女的情況下才有效。原來的帖子表明，包含後代孩子是由於ul> li而事實上是由於一個錯誤：獨生子女。矛盾的是：第一個孩子和後代孩子一樣，在第一個孩子的名單中選擇了第一個孩子，但是：獨生子女沒有。我在Firefox，Opera和Chrome中檢查了這一點。這裏有一個例子：

<!DOCTYPE html> 
<html lang="en"> 
<head><meta charset="utf-8"> 
<style> 
.list>ul>li:only-child {color:red} 
.list>ul>li:first-child {color:green} 
.list>ul>li:last-child {color:blue} 
</style> 
</head> 
<body> 
<div class="list"> 
<ul><li>Item one</li><ul> 
<l>Subitem one</li> 
<li>Subitem two</li></ul></li><!--<li>Item two</li> 
<li>Item three</li>--> 
</ul></div> 
</body></html>

激活：第一，兒童和：最後孩子規則取消對最後兩個項目。因此，主要瀏覽器中Selectors Level 3 standard的實現不一致。當存在：獨生子女規則並且獨特子女擁有後代時，不應激活第一子女規則。在這個例子中，獨生子應該是紅色的，但是它是綠色的。

來源

2018-03-05 22:50:05 user3483642

CSS選擇器僅用於定位直接子對象而不是其他相同的子對象

回答

相關問題