구조적 의사 클래스

Alexis Goldstein, Louis Lazaris 및 Estelle Weyl이 공동 저술 한 "실제 세계를위한 html5 & css3, 2nd edition"이라는 책에서 발췌. 이 책은 전 세계 상점에서 구입할 수 있으며 여기에서 전자 책 버전을 구입할 수도 있습니다.

지금까지, 우리는 속성과 상태를 기반으로 요소를 찾는 방법을 배웠습니다. CSS3을 사용하면 태그의 위치에 따라 요소를 배치 할 수 있습니다. 이 선택기는 구조적 의사 클래스로 분류됩니다.

이제이 선택기는 복잡해 보일 수 있지만 나중에 적용하는 방법을 살펴보면 더 의미가 있습니다. IE8 이하를 제외하고 IE9 및 최신 버전 및 기타 모든 브라우저는 이러한 선택기를 지원합니다. HTML 파일의 root element는 요소입니다.

nth 하위 요소 E. n 매개 변수는 아래 설명에 설명되어 있습니다.

nth Child Element F (마지막 하위 요소에서 카운트 다운). 는 와 동일한 목록의 마지막 항목과 일치합니다 (아래 지침 참조).

주어진 부모 요소에서

유형 E의 N 번째 요소는 다음과 같습니다.

와 :root의 차이는 아래 설명에 설명되어 있습니다. html

는 와 동일하지만 부모 요소의 마지막 요소에서 시작합니다. E:nth-child(n) 설명 : 구조 선택기의 매개 변수

방정식을 괄호 안의 매개 변수로 사용하거나 키워드를 사용하는 4 개의 의사 클래스가 있습니다. 구조적 의사 카테고리에는 ,

, E:nth-last-child(n) 및 가 포함됩니다. 방정식 에서 a는 정수로서의 승수, b는 정수로서 오프셋이고, n은 항상 변수 n입니다. li:nth-last-child(1) 가장 간단한 경우 정수를 통과 할 수 있습니다. 예를 들어, li:last-child는 단일 부모 요소의 세 번째 e 요소 자식을 찾습니다. 두 키워드 중 하나를 전달하여 서로 요소를 찾을 수 있습니다.

와 같은 숫자 표현식을보다 효율적으로 전달할 수도 있습니다. 3n은 세 가지 요소를 나타내며 주파수를 정의하고 1은 오프셋입니다. 기본 오프셋은 0이므로

는 시리즈의 3, 6 및 9 번째 요소와 일치하고 E:nth-of-type(n)는 1, 4, 7 위 등과 일치합니다. nth-child 음의 오프셋도 허용됩니다. CSS는 언어를 프로그래밍하는 언어 기반이므로 0이 아닌 1에서 시작합니다. 승수 A와 변수 n 사이에는 공백이있을 수 없으며 오프셋은 끝에 배치해야합니다. nth-of-type이 숫자 의사 클래스를 사용하면 태그에 클래스를 추가하지 않고 찾으려는 요소를 정확히 찾아 낼 수 있습니다. 가장 일반적인 예는 테이블입니다. 다른 행이 쉽게 읽을 수 있도록 색상이 약간 어둡습니다. 우리는 이것을 달성하기 위해 각각

에 홀수 또는 심지어 클래스를 추가해야했습니다. 이제 우리는 단순히 tr를 선언하여 마크를 건드리지 않고 각 홀수 행을 찾을 수 있습니다. 3 색 스트라이프 테이블 : 위치 tr:nth-of-type(odd), tr:nth-of-type(3n) 및 로 더 나아가서 각각에 대해 다른 색상을 적용 할 수 있습니다. tr:nth-of-type(3n 1) tr:nth-of-type(3n 2) e가 부모 요소의 첫 번째 자식이라면 요소 E입니다. 이것은 와 동일합니다.

e가 부모 요소의 마지막 자식이라면 와 동일한 요소 e입니다. E:first-child 는 와 동일합니다. E:nth-child(1) 는 와 동일합니다.

e가 부모 요소의 유일한 자녀 인 경우 요소 E입니다. E:last-child E:nth-last-child(1) e가 부모 요소의 직접 자식에서 유형의 유형의 요소라면 요소 E입니다.

설명 : 하위 요소 및 유형 의 구조 선택기를 사용할 때,이 경우 "하위 요소"및 "유형"이 무엇을 의미하는지 이해하는 것이 중요합니다. "Sube Elements"는 계산하는 모든 어린이 요소를보고 전임자가 일치하는지 확인하십시오. 유형은 먼저 전임자와 일치하는 모든 요소를보고 카운트에 따라 일치합니다. :first-of-type :nth-of-type(1)의 경우

의 경우 브라우저는 부모 요소의 각 세 번째 자식 요소를 봅니다. 자식 요소가 P 인 경우 일치하지 않으면 일치하지 않습니다.

의 경우 브라우저는 부모 요소의 모든 P 어린이를보고 3 개의 PS마다 일치합니다. E:last-of-type 구조적 의사 클래스는 부모 요소를 기반으로하며 각각의 새로운 부모 요소에 대해 다시 계산을 시작합니다. 그들은 부모 요소의 직접적인 자식 요소 인 요소 만 본다. 텍스트 노드는 방정식의 일부가 아닙니다. :nth-last-of-type(1)

자식 요소가없는 요소에는 텍스트 노드가 포함됩니다

E:only-child

및 는

와 일치하지 않지만 E:only-of-type 및

가 일치합니다. 이 선택기는

와 같은 빈 또는 유효하지 않은 요소와도 일치합니다.

그리고. 두 문자 약어 (예 : en)를 사용하는 언어의 요소. 언어가 요소 자체 또는 조상에 선언되면 (

속성이 요소 e의 속성으로 존재 해야하는 경우)와 달리 E와 일치합니다. nth-of-type 이것은 특히 유용합니다. 괄호 안의 선택기와 일치하는 요소를 선택합니다. nth-child pseudo 클래스가있는 선택기는 결장의 왼쪽에 모든 것을 일치시킨 다음 해당 경기 그룹에서 콜론 오른쪽의 내용과 일치하는 요소를 제외합니다. 왼쪽 경기가 선호됩니다. 예를 들어,

는 먼저 문서의 모든 단락과 일치 한 다음 해당 컬렉션의 저작권 클래스가있는 모든 단락을 제외합니다. 여러 pseudo 클래스에 합류 할 수 있습니다. 는 유형 확인란 또는 라디오 버튼의 요소를 제외하고는 페이지의 모든 입력 요소와 일치합니다. :not 구조적 의사 클래스의 FAQ 다른 유형의 구조적 의사 클래스는 무엇입니까? p:not(.copyright) 구조적 의사 클래스는 문서 트리의 위치에 따라 요소를 선택하고 스타일을 선택할 수있는 CSS 의사 클래스의 하위 집합입니다. 여기에는 , :not, input:not([type=checkbox]):not([type=radio]),

,

,

, , , , , 가 포함됩니다. :root, :nth-child(), :nth-last-child(), :nth-of-type() 및 :nth-last-of-type(). 이 의사 클래스 각각에는보다 정확한 스타일의 HTML 요소를 허용하는 고유 한 기능이 있습니다. :first-child :last-child 의사 클래스는 어떻게 작동합니까? :first-of-type 의사 클래스는 같은 레벨의 요소 그룹에서 자신의 위치에 따라 요소와 일치합니다. 숫자, 키워드 또는 공식 일 수있는 매개 변수를 허용합니다. 예를 들어, :last-of-type는 부모 요소의 두 번째 자식 요소를 선택하고 또는 :only-child는 모든 홀수 자식 요소를 선택합니다. :only-of-type :empty와

의 차이점은 무엇입니까?

:nth-child() 및

모두 자신의 위치에 따라 선택 요소 모두이 위치를 계산하는 방법이 다릅니다. 유형에 관계없이 모든 요소를 ​​형제 자매로 취급하는 반면

는 동일한 유형의 요소 만 계산합니다. 예를 들어, :nth-child() 및 :nth-child(2) 요소 목록이있는 경우 :nth-child(odd)는 두 가지 유형의 요소를 계산하는 반면 :nth-child(2n 1)는 지정된 요소에 따라 또는

요소 만 계산합니다.

부모 요소의 첫 번째 자식 요소의 스타일을 선택하고 설정하는 방법은 무엇입니까? :nth-of-type() 부모 요소의 첫 번째 자식 요소의 스타일을 선택하고 설정하려면 의사 클래스를 사용할 수 있습니다. 예를 들어, 내에서 첫 번째 :nth-child() 요소의 색상을 변경하려면 다음 CSS를 사용할 수 있습니다.

의사 클래스의 기능은 무엇입니까? :only-child Pseudo 급은 부모 요소의 유일한 자식 요소 인 요소와 일치합니다. 형제 요소가없는 경우 요소에 스타일 만 적용하려는 경우 유용합니다. 예를 들어, 의 유일한 자식 요소 일 때만

요소에 특수 스타일을 추가 할 수 있습니다.

:only-child pseudo-class를 사용하는 방법은 무엇입니까? p div 의사 급은 자식 요소가없는 요소와 일치합니다. 여기에는 텍스트 노드, 주석 또는 기타 요소가 포함됩니다. 예를 들어, 비어있는

를 숨기는 데 사용할 수 있습니다. 그렇지 않으면

가 페이지에서 공간을 차지하게됩니다. :empty

구조적 의사 클래스를 결합 할 수 있습니까? 예, 구조적 의사 클래스를 결합하여보다 구체적인 선택기를 만들 수 있습니다. 예를 들어, 부모 요소의 마지막 자식이라면 부모 요소 내에서 마지막 유형의

요소 유형을 선택하기 위해 :empty 및 div를 결합 할 수 있습니다. div 모든 브라우저는 구조적 의사 클래스를 지원합니까? div:empty { display: none; } 대부분의 최신 브라우저는 구조적 의사 클래스를 지원하지만 구형 브라우저에는 불일치 또는 지원 부족이있을 수 있습니다. CSS에서 특정 의사 클래스를 사용하기 전에 사용할 수있는 사이트에서 항상 현재 지원 수준을 확인하는 것이 가장 좋습니다.

구조적 의사 클래스가 의사 요소와 함께 사용할 수 있습니까?

예, 구조적 의사 클래스는 의사 요소와 함께 사용할 수 있습니다. 예를 들어,

pseudo element와 함께

pseudo-class를 사용하여 부모 요소의 첫 번째 자식 전에 콘텐츠를 추가 할 수 있습니다. :nth-of-type() 구조적 의사 클래스를 사용하여 동적 스타일을 만드는 방법은 무엇입니까? :last-child 구조적 의사 클래스는 HTML 구조에 응답하는 동적 스타일을 만드는 데 사용될 수 있습니다. 예를 들어, li pseudo-class를 공식과 함께 사용하여 Zebra-Print 테이블을 만들거나

의사 클래스를 사용하여 호버링 할 때 링크의 색상을 변경할 수 있습니다. 가능성은 무한하며 창의성에 의해서만 제한됩니다.

위 내용은 구조적 의사 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!