특수 클래스 누락으로 CSS 우선 하위 선택

목록의 상단과 하단에 둥근 모서리가 있으며 각 LI에는 배경색이 있습니다. 배경색으로 인해 전체 UL에 대한 둥근 모서리가 적용되지 않으며 첫 번째 LI에는 여전히 사각형 모서리가 있습니다.특수 클래스 누락으로 CSS 우선 하위 선택

첫 번째 LI가 실제로 숨겨져 야하는 시나리오가있는 경우를 제외하고는 모든 것이 좋으며 클래스 이름으로 수행하는 시나리오가 있습니다. 아래 예에서 "hide-me"가 있습니다.

<ul> 
    <li class="hide-me">A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
</ul>

위 코드에서 LI는 클래스 "hide-me"와 LI B, C, D를 숨기고 싶습니다. 그래서 LI B는 왼쪽 위와 오른쪽 위를 둥글게 만들었고 LI D는 아래쪽을 둥글게하고 오른쪽 아래를 둥글게했습니다. 내가 사용

CSS의은과 같다 :

li:first-child { 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
} 

li:last-child { 
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
} 

li { background:yellow; } 

.hide-me { display:none; }

그러나 당신이 볼 수 있듯이, 내 위의 CSS는 숨겨져 리튬 A를 둥근 모서리를 적용됩니다. 그러나이 경우 LI B는 LI A가 숨겨져 있기 때문에 목록 상단에 놓이게됩니다.하지만 UL의 첫 번째 아동이 아니기 때문에 둥근 모서리가 없습니다.

이 시나리오에서 숨겨진 첫 번째 LI에 둥근 모서리를 적용하려면 어떻게해야합니까?

출처

2011-11-21 adam

두 번째 항목 (첫 번째 li은 숨겨져 있지 않음)에 클래스를 설정하는 것에 반대하는 내용이 있습니까? 첫 번째 항목을 숨김으로 설정할 때 jQuery (또는 .net/php)를 사용하여 클래스를 다음 항목에 추가하는 것은 너무 어렵지 않아야합니다. CSS3에는 nth-child (2) psuedo selector가 있지만 어디에서나 아직 완전히 지원되지는 않습니다 (일명 IE :). – ToddBFisher

왜 그들은 : 첫 번째로 일치하는 의사 선택 도구를 만들지 않았습니까? 대부분의 의사 선택기는 다른 클래스를 요소에 적용하지 않는 경우에만 유용합니다. – animuson

전혀 동의하지 않음 1 + – ToddBFisher

이 사용해보십시오?

출처

2011-11-21 02:37:10 joshnh

나는 오버 플로우를 시도했다 : 숨겨진 트릭이 작동하지 않는다. 그러나 인접 요소 아이디어는 좋은 것입니다. 감사합니다. – adam

첫 번째 비 숨겨진 요소 앞에 숨겨진 요소가 두 개 이상있는 경우에는 작동하지 않습니다. – fletom

첫 번째 선택자를 li:first-child, .hide-me:first-child + li으로 변경할 수 있습니다.

li 인 경우 첫 번째 자식을 선택하고, 첫 번째 자식 인 경우 .hide-me 클래스가 앞에 오는 li을 선택하십시오.

또한

 
li:first-child, 
li.hide-me:first-child + li { 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
}

는, 단순히이 작품을 사용하는 것입니다 :

출처

2011-11-21 02:34:20 thirtydot

특수 클래스 누락으로 CSS 우선 하위 선택

답변

관련 문제