Bộ chọn CSS để chỉ nhắm mục tiêu đến trẻ em ngay lập tức và không phải con cháu giống hệt khác

Question

Tôi có danh sách có thể sắp xếp lồng nhau có thể thêm hoặc xóa các mục được thêm động và có thể được lồng sâu n-levels. Khi lồng vào nhau, một phần tử ul mới được chèn vào bất kỳ phần tử li nào được chọn làm cha mẹ. Tình trạng ban đầu của danh sách là một cái gì đó như sau:

<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> 

Tôi đang sử dụng MooTools để làm các loại, vv, và nó hoạt động tốt, nhưng tôi đang gặp sự cố đặt lại văn bản vị trí chính xác trên loại . Mỗi bộ chọn CSS tôi cố gắng sử dụng cũng bao gồm tất cả các số của trẻ em thay vì chỉ các phần tử li thuộc danh sách chứ không phải bất kỳ phần tử nào thuộc danh sách con. Giả sử rằng ngoại trừ id, vị trí và văn bản, mỗi phần tử li trong tất cả các danh sách giống với tất cả các danh sách khác. Có bộ chọn để chỉ nhận con ngay lập tức không? Có một cách khác để làm điều này?

Tôi đã thử một số bộ chọn con giống như những người được đề cập:

• ul > li sẽ chọn tất cả các yếu tố li mà là con cái của một ul, không chỉ là những đứa trẻ ngay lập tức
• #parent > li Liệu tương tự như trên .

Đây là chức năng mà tôi hiện đang chạy khi một mục bị loại bỏ, không xử lý việc sắp xếp, hoạt động tốt, chỉ cập nhật vị trí. Lưu ý rằng nó cũng là MooTools cú pháp:

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++; 
     }); 
    }); 
} 

Hiện nay, việc thay đổi thứ tự bất kỳ mục trên cấp độ chính sẽ ghi số lại tất cả mọi thứ 1-12, ngay cả những danh sách con. Việc thay đổi bất kỳ mục nào trên danh sách con sẽ cung cấp số chính xác cho danh sách đó, nhưng làm cho danh sách cha mẹ đếm sai tất cả các phần tử li con trong đánh số.

tôi cảm thấy như đây là một hack xấu xí, nhưng nó hoạt động:

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++; 
    }); 
} 

Answer 1

ul > li 

chỉ làm những đứa trẻ ngay lập tức. Vì vậy, ví dụ, để làm chỉ các yếu tố danh sách cấp cao nhất bạn có thể sử dụng:

#parent > li 

Lưu ý: này không được hỗ trợ trên IE6.

Các phương pháp phổ biến để tương thích ngược là để làm một cái gì đó như thế này:

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

Đó là tẻ nhạt hơn vì bạn phải áp dụng phong cách và sau đó tắt chúng (và bạn có thể không nhất thiết phải biết những gì các giá trị cũ là) nhưng đó là giải pháp CSS thuần túy thân thiện với IE6 duy nhất có.

Chỉnh sửa: Ok bạn có vấn đề cụ thể về MooTools. getElements() trả về tất cả các hậu duệ, không chỉ là trẻ em ngay lập tức. Thử sử dụng 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++; 
     }); 
    }); 
} 

hoặc tương tự như vậy.

Answer 2

Câu hỏi ban đầu chưa được trả lời.: chỉ trẻ em chỉ làm việc nếu đứa trẻ duy nhất không có con cháu. Bài viết gốc cho rằng sự bao gồm của trẻ em hậu duệ là do ul> li trong khi đó là trong thực tế do một lỗi trong: chỉ có con. Nghịch lý: đứa con đầu tiên chọn đứa con đầu tiên trong danh sách với con cháu, cũng như đứa con cuối cùng, nhưng: con cái duy nhất thì không. Tôi đã kiểm tra điều này trong Firefox, Opera và Chrome. Dưới đây là ví dụ:

<!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> 

Để kích hoạt: con đầu tiên và: quy tắc con cuối cùng bỏ ghi chú hai mục cuối cùng. Do đó, việc triển khai Selectors Level 3 standard không nhất quán trong các trình duyệt chính. Quy tắc: con đầu tiên sẽ không được kích hoạt khi có một quy tắc: chỉ con và một con duy nhất có con cháu. Trong ví dụ, con duy nhất phải có màu đỏ nhưng màu xanh lá cây.