n 번째 자녀와

전에 내가 CSS의 문제가있어, 난이n 번째 자녀와

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:67px; 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-36px; 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment:nth-child(1):before { 
    height:37px; 
    margin-top:-6px; 
}

를 달성하기 위해 필요하지만 난 그런 두 의사 요소를 넣을 수없고, 나는 그것을 테스트했습니다 작품), 도 다른 방법을 시도했지만 알아낼 수 없었습니다.

출처

2012-03-23 Kristjan

나는 작품 것을 확신합니다 (첫 번째는 파란색 유지되도록 또한 background-color 스타일을 반전). 어떤 문제에 직면하고 있습니까? – BoltClock

이것은 유효하지만 현재 구현에서는 올바르게 해석하는 데 어려움이있을 수 있습니다. – jwueller

다음 작품들 : http://jsfiddle.net/9KkeK/. 그래서 당신의 문제는 다른 곳에 있습니다. –

:nth-child() 클래스 또는 기타 항목으로 필터링하지 않습니다. 코드에서 첫 번째 ul.sub-comment은 #comments-wrapper의 첫 번째 자식이 아니므로 작동하지 않습니다.

대신 this selector technique를 사용하여 다음과 같이 height 및 margin-top 스타일을 반전 : (그 문제에 대한 또는 :first-child)

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:37px; /* was 67px in your code */ 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-6px; /* was -36px in your code */ 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before { 
    height:67px; /* was 37px in your code */ 
    margin-top:-36px; /* was -6px in your code */ 
}

기본적으로

대신 :nth-child(1)을 원래의 스타일을 적용하기 위해 다른 ul.sub-comment와 형제 선택기를 사용 모든 후속 ul.sub-comment 요소 첫 번째 후.

Updated fiddle

는

출처

2012-03-23 22:09:14 BoltClock

대단히 감사합니다! :) – Kristjan

n 번째 자녀와

답변

관련 문제