CSS Descendant Selector 란 무엇입니까?

by 제니퍼 키린

HTML 문서의 구조는 가계도와 유사합니다. 가족 중에는 부모님과 전에 온 다른 사람들이 있습니다. 이들은 당신의 조상입니다. 자녀와 그 나무에서 당신을 후한 사람들은 당신의 후손입니다. HTML도 비슷한 방식으로 작동합니다. 다른 요소의 내부에있는 요소는 해당 요소의 자손입니다. 예를 들어, 거의 모든 HTML 요소가 태그 안에 있기 때문에 요소의 하위 요소가됩니다. 이 관계는 CSS 작업을 시작할 때 이해해야하며 시각적 스타일을 적용하기 위해 특정 요소를 대상으로해야합니다.

CSS 하위 셀렉터

CSS 하위 클래스 선택기는 다른 요소 내부에있는 요소 (또는 다른 요소의 하위 요소 인 요소)에 적용됩니다. 예를 들어, 순서가 지정되지 않은 목록에는 태그가있는 태그가 하위 항목으로 있습니다. 다음 HTML을 예제로 사용 해보자.

링크입니다
LI 태그는 UL 태그의 자손입니다. A 태그는 LI (하위 자손) 태그와 UL (손자락 자손) 태그의 자손입니다. 가계도 예제를 사용하여 이것에 대해 생각해 보면
- 는 그 요소의 자식이되고 는
- 의 자식이되고
  - )의 하위 항목 인 링크 요소 ()에만 적용됩니다. 목록 항목의 하위 항목이 아닌 페이지의 다른 모든 링크는이 스타일을 얻지 못합니다.
    
    한 가지 기억해야 할 것은 자손 선택자에서 사용할 태그 사이에 얼마나 많은 태그가 있는지는 상관이 없습니다. 두 x 째 요소가 첫 x 째 요소 내의 임의의 위치로 - 인 경우, 자손으로 선택됩니다.
    
    ul 엘리먼트에서 유래 된 모든 앵커를 선택하려면 다음과 같이 작성하면됩니다.
    ul a {텍스트 장식 : 없음; }
    이제 이러한 스타일은 목록 항목의 하위 항목 인 모든 링크에 적용됩니다. 이 선택기를 작성할 수도 있습니다.
    ul li a {텍스트 장식 : 없음; }
    이것은 두 개 이상의 유형 선택자를 사용하는 자손 선택자입니다. 이 경우 목록 항목 및 정렬되지 않은 목록의 내부에있는 링크에 적용됩니다.
    
    클래스 선택기 및 ID 선택기 사용
    
    내림차순의 셀렉터는 항상 유형 자손 일 필요는 없습니다. 예를 들어 ID 속성이 "billboard"인 사이트 영역 (예 : 부서)이 있다고 가정합니다. 해당 ID에서 자손 선택자를 설정할 수 있습니다.
    #billboard ul {background-color : #ccc; }
    이렇게하면 ID가 "billboard"인 요소의 하위 항목 인 정렬되지 않은 목록의 스타일이 지정됩니다. 클래스 값에 대해서도 동일한 작업을 수행 할 수 있습니다.
    div.billboard ul {background-color : #ccc; }
    이는 부서의 클래스 값이 "빌보드"라고 가정합니다. 위의 CSS는이 클래스 값을 가진 모든 구분 내에서

CSS 하위 셀렉터

Alike posts

See Newest

Sapid posts