HTML 요소로 작업할 때 스타일 지정이나 조작을 위해 특정 요소를 선택하는 것이 중요합니다. 한 가지 시나리오는 다른 요소 내에서 첫 번째 클래스 발생을 대상으로 하며, 원하는 클래스의 위치가 여러 요소 내에서 다를 때 문제를 제시하는 것입니다.
이 맥락에서 우리는 '클래스'가 있는 첫 번째 요소를 선택하는 것을 목표로 합니다. ID 또는 클래스 'B'로 식별되는 요소 내의 A'입니다. 문제는 'B'가 이름과 구조 모두 다를 수 있고 'A' 요소가 'B' 내에서 위치가 일관되지 않을 때 발생합니다. 그러나 한 가지 일관된 요소는 남아 있습니다: 외부 요소 'C'의 존재입니다.
CSS3은 다음을 선택하는 :first-of-type 의사 클래스를 도입합니다. 형제 중 해당 유형의 첫 번째 요소입니다. 불행하게도 CSS에는 :first-of-class 의사 클래스가 없습니다. 따라서 대체 해결 방법이 필요합니다.
한 가지 접근 방식은 목표를 달성하기 위해 재정의 스타일과 함께 일반 형제 조합 기호(~)를 활용하는 것입니다. 이 기술은 CSS가 하향식 방식으로 스타일을 적용한다는 사실을 활용합니다. 두 가지 규칙을 정의하면 원하는 기준과 일치하지 않는 '.A' 요소의 기본 스타일을 무시할 수 있습니다.
.C > * > .A { /* Styles for all '.A' elements that are grandchildren of '.C' */ } .C > * > .A ~ .A { /* Styles for '.A' elements that follow the first '.A' child of any element that is a child of '.C' */ }
이 규칙에서 첫 번째 규칙은 '의 모든 '.A' 손자를 대상으로 합니다. 기음'. 여기에는 우리가 원하는 첫 번째 항목이 포함되어 있으므로 두 번째 규칙을 사용하여 후속 '.A' 요소에 대해 이 스타일을 "실행 취소"해야 합니다. 이는 ~ 결합자를 사용하여 동일한 상위 아래의 다른 '.A' 요소 뒤에 오는 '.A' 요소만 선택함으로써 수행됩니다.
이 방법을 설명하려면 기술이 작동하면 다음 HTML 구조를 고려하십시오.
<div class="C"> <div class="B"> <div class="E">Content <!-- [1] --></div> <div class="F">Content <!-- [1] --></div> <div class="A">Content <!-- [2] --></div> <div class="A">Content <!-- [3] --></div> </div> <!-- ... other elements ... --> </div>
여기서 '[1]'은 기준을 충족하지 않는 요소를 나타내고 '[2]'는 '[3]'은 다르게 스타일을 지정하려는 첫 번째 및 후속 '.A' 요소를 나타냅니다.
결과적으로 요소 '[2]'(첫 번째 '.A')는 기본 스타일을 유지하는 반면 '[3]' 요소는 두 번째 규칙에 의해 스타일이 재정의됩니다. 따라서 '.C' 요소의 컨텍스트 내에서 '.A' 클래스가 처음 나타나는 것을 성공적으로 타겟팅하고 스타일을 지정했습니다.
위 내용은 복잡한 HTML 구조 내에서 특정 클래스를 가진 첫 번째 요소를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!