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

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

CSS 선택기로 작업할 때 특정 클래스를 가진 요소의 마지막 자식이 때때로 발생할 수 있습니다. 다음 HTML을 고려해보세요.

우리의 목표는

"목록" 클래스가 있는 요소입니다. 원하는 요소의 위치가 다양할 수 있으므로 ul li:nth-child(3)를 사용하는 일반적인 접근 방식이 항상 적용 가능한 것은 아닙니다.

이 문제를 극복하기 위해 속성 선택기를 활용할 수 있습니다. 방법은 다음과 같습니다.

이 선택기에서:

• [class~='list']는 클래스 속성에 전체 단어로 "list" 문자열이 포함된 모든 요소를 ​​대상으로 합니다. 이를 통해 순서에 관계없이 문자열의 어느 위치에나 "목록"이 있는 여러 클래스를 허용합니다.
• :last-of-type은 해당 유형 내에서 이전 선택기와 마지막으로 일치하는 항목을 선택합니다. 이 경우 마지막
• "list" 클래스가 있는 요소.

이러한 선택기를 결합하면 지정된 클래스의 마지막 하위 요소에 효과적으로 스타일을 지정할 수 있습니다. http://codepen.io/chasebank/pen/ZYyeab에서 рабочее, приятное 데모를 찾을 수 있습니다.

속성 선택기에 대한 자세한 내용은 다음을 확인하세요. 리소스:

• http://css-tricks.com/attribute-selectors/
• http://www.w3schools.com/css/css_attribute_selectors.asp

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