SASS의 마지막 하위 및 마지막 유형 선택기

SASS는 단순하고 유지 관리가 쉬운 코드를 작성할 수 있도록 일반 CSS를 통해 다양한 기능을 제공하며 고급 선택기가 그 중 하나입니다. SASS에는 마지막 자식과 마지막 유형 선택기가 포함되어 있으며, 이 튜토리얼에서 이에 대해 논의하겠습니다.

SASS의 마지막 하위 선택자

"마지막 하위" 선택기를 사용하면 개발자가 상위 요소 내의 마지막 요소를 선택할 수 있습니다. 또한 유형에 관계없이 마지막 HTML 요소를 선택할 수 있습니다. 마지막 요소에 중첩된 하위 요소가 포함된 경우 중첩된 요소는 마지막 하위 요소의 일부이므로 스타일도 적용됩니다.

문법

사용자는 다음 구문에 따라 CSS에서 "마지막 자식" 선택기를 사용할 수 있습니다.

으아악

위 구문은 "요소" 클래스 이름을 포함하는 HTML 요소의 마지막 하위 요소를 선택합니다.

예

index.html 파일에서 "컨테이너" div 요소를 생성하고 두 개의 단락과 div 요소를 마지막 하위 요소로 추가했습니다.

SCSS 파일에서는 "last-child" 선택기를 사용하여 컨테이너 div 요소의 마지막 요소를 선택합니다. 출력에서 스타일이 하위 div 요소에 적용되었음을 확인할 수 있습니다.

파일 이름 – index.html

으아악

파일 이름 – style.scss

으아악

컴파일 후 다음 코드가 생성됩니다.

파일 이름 – style.css

으아악

예

으아악

예

아래 예에서는 상위 div 요소 내에 여러 하위 div 요소를 추가했습니다. 또한 마지막 div 요소 내에 여러 수준의 중첩된 하위 요소를 추가했습니다.

SCSS 파일에서는 마지막 하위 선택기를 사용하여 상위 div 요소의 마지막 요소를 선택합니다. 출력에서 사용자는 마지막 하위 요소의 중첩된 하위 요소에도 스타일이 적용되는 것을 확인할 수 있습니다.

파일 이름 – index.html

으아악

파일 이름 – style.scss

으아악

컴파일 후 다음 코드가 생성됩니다.

파일 이름 – style.css

으아악

예

으아악

SASS의 마지막 유형 선택기

"마지막 유형" 선택기를 사용하면 개발자가 상위 div 요소 내에서 특정 유형의 마지막 요소를 선택할 수 있습니다. 따라서 "last-of-type" 선택기를 사용할 때는 선택기를 사용하여 요소 유형을 지정해야 합니다. 클래스 이름, 태그 이름, 요소 이름, ID 등을 사용하여 요소 유형을 지정할 수 있습니다.

문법

사용자는 다음 구문에 따라 SASS의 "last-of-type" CSS 선택기를 사용할 수 있습니다.

으아악

위 구문은 상위 요소의 마지막 "p" 요소를 선택합니다.

예

아래 예에서는 클래스 이름이 "multiple"인 div 요소를 만들었습니다. 그런 다음 두 개의 단락 요소와 마지막 div 요소를 삽입했습니다.

SASS에서는 "다중" 요소의 마지막 "p" 요소를 선택하기 위해 "last-of-type" 선택기를 사용합니다. 사용자는 마지막 하위 요소가 아니더라도 마지막 "p" 요소에 스타일이 적용되는 것을 출력에서 ​​관찰할 수 있습니다.

파일 이름 – index.html

으아악

파일 이름 – style.scss

으아악

컴파일 후 다음 코드가 생성됩니다.

파일 이름 – style.css

으아악

예

으아악

예

아래 예에서는 "과일" 클래스를 포함하는 여러 div 요소를 만들었습니다. 또한 "bike" 클래스 이름을 포함하는 마지막 div 요소를 생성합니다.

SASS 코드에서는 ".fruit :last-of-type" 선택기를 사용하여 "fruit" 클래스 이름이 포함된 마지막 요소를 선택합니다. 출력에서 사용자는 "과일" 클래스 이름을 포함하는 마지막 요소인 마지막에서 두 번째 div 요소의 스타일을 지정하는 것을 확인할 수 있습니다.

파일 이름 – index.html

으아악

파일 이름 – style.scss

으아악

컴파일 후 다음 코드가 생성됩니다.

파일 이름 – style.css

으아악

예

으아악

사용자는 SASS에서 "마지막 하위" 및 "마지막 유형" 선택기를 사용하는 방법을 배웠습니다. "마지막 자식" 선택기는 어떤 조건에서든 부모 요소의 마지막 요소를 선택하는 데 사용됩니다. 'last-of-type' 요소는 상위 요소 내에서 특정 유형의 마지막 하위 요소를 선택하는 데 사용됩니다.

위 내용은 SASS의 마지막 하위 및 마지막 유형 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!