CSS에서 특정 클래스 이름으로 마지막 하위 요소의 스타일을 지정하는 방법은 무엇입니까?

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

CSS 스타일링 영역에서는 요소를 조작해야 하는 경우가 많습니다. 상위 컨테이너 내의 위치를 ​​기반으로 합니다. 특정 클래스 이름을 가진 요소의 "마지막 자식"을 대상으로 해야 할 때 문제가 발생합니다.

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

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

목표는 스타일을 적용하는 것입니다. 마지막

클래스 이름이 "list"인 요소입니다. 처음에 제안된 선택기인 ul li.list:last-child가 작동하지 않지만 대체 솔루션이 있습니다.

구조용 속성 선택기

CSS 속성 선택기 특정 속성을 기반으로 요소를 타겟팅할 수 있습니다. 이 경우 [class~='list'] 선택기를 사용하여 "list" 클래스가 있는 요소를 대상으로 지정할 수 있습니다. "~=" 연산자는 지정된 클래스를 전체 단어로 포함하는 요소와 일치합니다. 이는 클래스 명명 규칙의 유연성을 허용하여 여러 클래스가 고려되도록 보장합니다.

마지막으로 :last-of-type 의사 클래스는 이전 선택기와 일치하는 해당 유형의 마지막 하위 항목을 선택합니다. 이러한 기술을 결합하면 다음과 같은 작동 선택기가 생성됩니다.

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

이 선택기는 마지막

"list" 클래스가 있고 검은색 배경색을 적용하는 요소입니다.

속성 선택기에 대해 자세히 알아보기:

• [CSS Tricks의 속성 선택기]( http://css-tricks.com/attribute-selectors/)
• [CSS 속성 선택기 W3Schools](http://www.w3schools.com/css/css_attribute_selectors.asp)

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