다른 동일한 하위 항목이 아닌 직계 하위 항목 만 대상으로하는 CSS 선택기
항목을 동적으로 추가하거나 제거 할 수있는 중첩 된 정렬 가능한 목록이 있으며 n 수준 깊이로 중첩 될 수 있습니다. 중첩시 새로운 ul 요소가 부모로 선택된 li 요소에 삽입됩니다. 목록의 초기 상태는 다음과 같습니다.
<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 선택기는 포함 모든 아이들보다는 목록에 속하는 모든 하위 목록에 속하는뿐만 아니라 리튬 요소를. id, position 및 text를 제외하고 모든 목록의 각 li 요소가 다른 모든 요소와 동일하다고 가정합니다. 직계 자식 만 얻기위한 선택기가 있습니까? 이를 수행하는 다른 방법이 있습니까?
언급 된 것과 같은 자식 선택기를 시도했습니다.
ul > li직계 자식뿐만 아니라 ul의 자식 인 모든 li 요소를 선택 합니다.#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++;
});
}
ul > li
직계 아이들 만합니다. 예를 들어 최상위 목록 요소 만 수행하려면 다음을 사용할 수 있습니다.
#parent > li
참고 : IE6에서는 지원되지 않습니다.
이전 버전과의 호환성에 대한 일반적인 해결 방법은 다음과 같이하는 것입니다.
#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }
It's more tedious because you have to apply styles and then turn them off (and you may not necessarily know what the old values are) but it's the only IE6-friendly pure CSS workaround there is.
Edit: Ok you have a MooTools specific issue. getElements() returns all descendants, not just immediate children. Try using 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++;
});
});
}
or something like that.
The original question was not answered. :only-child only works if the only-child has no descendant children. The original post suggested that the inclusion of descendant children was due to ul>li whereas it is in fact due to a bug in :only-child. Paradoxically :first-child selects the first child in a list with descendant children, as does last-child, but :only-child does not. I checked this in Firefox, Opera and Chrome. Here is an example:
<!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>
To activate :first-child and :last-child rules uncomment the last two items. The implementation of the Selectors Level 3 standard is thus inconsistent in major browsers. The :first-child rule should not be activated when there is an :only-child rule and a unique child has descendants. In the example the only-child should be red but it is green.
'Program Tip' 카테고리의 다른 글
| 부트 스트랩의 clearfix 클래스 이해 (0) | 2020.12.01 |
|---|---|
| Visual C ++ 2008에서 UTF-8 문자열 리터럴을 만드는 방법 (0) | 2020.12.01 |
| VisualVM을 사용하여 Tomcat 애플리케이션 프로파일 링 (0) | 2020.12.01 |
| 함수에 전달 된 인수의 목록 / 튜플 / 사전을 가져 오나요? (0) | 2020.12.01 |
| UDID 및 재 컴파일을 관리하지 않고 무선으로 iOS 애플리케이션을 배포하는 방법 (0) | 2020.12.01 |