CSS에서 특정 클래스 이름을 가진 마지막 하위 요소를 선택하는 방법은 무엇입니까?

CSS에서 특정 클래스 이름을 가진 "마지막 자식" 선택

CSS로 작업할 때 위치와 클래스에 따라 특정 요소를 선택하는 것이 중요할 수 있습니다. 이름. 이 질문은 특정 클래스 이름을 가진 "마지막 하위" 요소를 대상으로 지정하는 방법을 탐구합니다.

문제:

다음 HTML 구조를 고려하세요.

<ul>
    <li>

목표는 클래스 이름이 "list"인 마지막 하위 항목을 선택하고 특정 스타일을 적용하는 것입니다.

제안된 솔루션(작동하지 않음):

ul li.list:last-child{background-color:#000;}

단점:

제안된 솔루션 CSS는 다음과 같은 요소에 대해 :last-child 선택기를 지원하지 않기 때문에 올바르지 않습니다. 클래스.

작업 솔루션:

속성 선택기를 사용하여 문제를 해결할 수 있습니다:

[class~=list]:last-of-type  {
    background: #000;
}

설명:

• [class~=list]: 이 속성 선택기는 클래스 이름이 "list"이거나 다른 클래스인 요소와 일치합니다. 문자열 "list"를 포함하는 이름.
• :last-of-type: 이 의사 클래스는 특정 유형의 마지막 요소(이 경우 li 요소)를 선택합니다.

장점:

• "목록" 클래스가 클래스의 마지막 클래스가 아닌 경우에도 작동합니다. 요소.
• 대상 요소의 정확한 위치에 대한 지식이 필요하지 않습니다.

중요 사항:

• ul li:nth 사용을 피하세요. -child(3) 어린이 수는 다를 수 있습니다.
• 이 경우 JavaScript는 허용되지 않습니다. 솔루션.

위 내용은 CSS에서 특정 클래스 이름을 가진 마지막 하위 요소를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!