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

CSS에서 특정 클래스 이름을 가진 마지막 하위 요소 선택

특정 클래스 이름을 가진 마지막 하위 요소를 대상으로 하는 CSS 솔루션 검색 클래스 이름에 대한 질문은 하위 요소의 수가 다양할 수 있기 때문에 문제를 제기합니다. 이로 인해 nth-child()만으로는 충분하지 않을 수 있다는 우려가 제기됩니다. JavaScript도 옵션에서 제외됩니다.

해결책은 :last-of-type 의사 클래스와 속성 선택기에 있습니다.

CSS 코드:

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

설명:

• [class~="list"]: 클래스 이름 "list"는 클래스 속성 값의 일부입니다(즉, 반드시 유일한 것은 아닙니다). class).
• :last-of-type: 해당 유형의 마지막 하위 요소(예: "list 클래스가 있는 마지막 li 요소)를 선택합니다. ").

이러한 선택기를 결합하면 규칙은 클래스 이름이 있는 마지막 하위 요소에 검정색 배경을 적용합니다. 다른 클래스가 있는지 여부나 존재하는 하위 요소 수에 관계없이 "목록"입니다.

예:

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

이 예에서는 세 번째 요소가 자식에 추가 클래스가 있는 경우 해당 클래스 이름이 있는 마지막 자식이기 때문에 CSS 규칙은 여전히 ​​해당 클래스에 검은색 배경을 적용합니다. "list."

속성 선택기:

속성 선택기를 사용하면 클래스 이름을 포함하여 해당 속성을 기반으로 요소를 대상으로 지정할 수 있습니다. class~ 선택기를 사용하면 지정된 단어가 포함된 클래스 이름을 가진 요소를 선택할 수 있습니다(예: "list-item-1", "list-item-2"라는 이름의 클래스가 여러 개 있는 경우). 등).

리소스:

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

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