새 CSS3 셀렉터 사용 방법 - 인형

비디오: CSS 수업 - 선택자 공부팁 2024

CSS3는 익숙해 져야 할 흥미로운 새로운 기능을 가진 몇 가지 새로운 선택기를 지원합니다. 이러한 새로운 기능을 사용하여 이전보다 훨씬 나은 방법으로 페이지를 향상시킬 수 있습니다.

속성 선택

특정 속성 값을 가진 요소에 스타일을 적용 할 수 있습니다. 예를 들어, input 태그는 다른 형식을 취하며 모두 type 속성으로 결정됩니다. 단일 스타일을 입력 요소에 적용하면 해당 스타일이 여러 다른 종류의 요소 (확인란, 텍스트 필드 및 라디오 단추)에 적용됩니다. 새 속성 구문을 사용하여 모든 입력 요소에 스타일을 적용 할 수 있습니다.

input [type = "text"] {background-color: #CCCCFF;}

태그 유형을 사용하거나 사용하지 않고 스타일을 적용 할 수 있지만 예기치 않은 부작용이있을 수 있습니다 매우 일반적인 속성을 선택하는 경우

아니요

역 선택을 원하는 경우가 있습니다. 예를 들어 특수 클래스의 멤버가 아닌 모든 단락에 스타일을 적용하려고한다고 가정합니다.

nth-child

nth-child selector는 그룹의 하나 이상의 요소를 선택할 수있게합니다. 기본 버전에서는 숫자 입력을 사용합니다.

#myList> li: nth-child (1) {border: 1px solid blue;}

첫 번째 요소 그룹에 스타일을 적용 할 수 있습니다. 이 예에서는 네 개의 항목이있는 목록이 있습니다. 스타일은 목록 항목이 아니라 목록 항목에 적용됩니다.

숫자 값은 실제로 + b와 같은 공식 일 수 있습니다. 당신이 대수를 좋아한다면, 당신은 다음과 같이 모든 짝수 요소를 선택할 수 있습니다:

#myList> li: nth-child (2n) {border: 1px solid blue;}

유사한 수식을 사용하여 홀수 번째 자식을 선택할 수도 있습니다.

#myList> li: nth-child (2n + 1) {border: 1px solid blue;}

이 수식 시스템을 사용하여 모든 종류의 그룹화를 얻을 수 있지만 대부분의 사람들은 특정 요소가 필요하거나 모든 짝수 또는 홀수 행 CSS3는 단축키 키워드를 짝수 및 홀수로 제공하므로 수학을 사용하지 않아도됩니다.

#myList> li: nth-child (even) {color: white; background-color: red;}

키워드를 사용하면 그룹에서 마지막 요소를 선택할 수 있습니다. 이 선택 기법에는 몇 가지 변형이 있습니다.

: n 번째 마지막 자식 (N)

: n 번째 자식과 동일하게 작동하지만 요소 그룹 끝에서부터 처음. :
nth-of-type (N) : 이 셀렉터는 nth-child처럼 작동하지만, 특정 유형으로 필터링하고 정확히 같은 유형이 아닌 요소는 무시합니다 요소의 last-child
: 이것은 자연스럽게 마지막 자식 요소를 선택한다. 마지막 n 번째 유형 (N)
: n 번째 유형과 유사하지만 그룹 끝에서 작동합니다. 첫 번째 자식
: 첫 번째 요소를 잡습니다 (기술적으로는 CSS2에서 사용할 수 있지만 거의 사용되지 않았습니다). 이러한 선택 도구는 모든 최신 브라우저에서 완벽하게 지원됩니다. 그러나 일반적으로 가독성을 높이기 위해 단순히 사용되므로 안전하게 사용하는 것이 안전해야합니다. 이전 브라우저는 단순히 스타일을 건너 뜁니다.

다른 새로운 의사 클래스

의사 클래스를 사용하면 요소의 상태를 기반으로 스타일을 지정할 수 있습니다. 현대 CSS는 많은 새로운 가상 클래스를 지원합니다:

: hover

: : hover 가상 클래스는 처음부터 CSS의 일부 였지만 공식적으로 태그에 대해서만 정의되었습니다. 이제: hover 가상 클래스는 모든 요소에 적용될 수 있습니다. 마우스가 요소 위에 있으면 해당 요소의 상태가 활성화됩니다. 항목이 활성화 될 때까지 포인팅 장치의 위치를 알 수 없기 때문에 모바일 장치가 항상 지원되는 것은 아닙니다. : focus
: : focus 가상 클래스는 요소가 키보드 입력을받을 준비가되면 활성화됩니다. : active
: 양식 요소는 현재 사용 중일 때 활성화됩니다 (예: 버튼을 눌렀지만 아직 해제되지 않은 경우). 휴대 기기는 호버 모드를 거치지 않고 직접 활성 모드로 건너 뜁니다. 이는 스타일을 위해 상태를 사용할 때 중요한 설계 고려 사항이 될 수 있습니다. 상태 유사 클래스는 IE 브라우저 제품군을 제외한 모든 최신 브라우저에서 완벽하게 지원됩니다. 초기 버전의 IE에도 제한적이지만 버그가 있습니다.