: last-of-type 의사 클래스가 예상대로 작동하지 않습니다.

저는 이와 같아야하는 요소에 :last-of-type을 적용하고 있습니다. http://www.elemovements.com에서 최종 div.info (각 기사의 맨 아래 정보)을 확인하십시오. 왜 작동하지 않는거야?: last-of-type 의사 클래스가 예상대로 작동하지 않습니다.

출처

2012-04-20 Gabriel Ryan Nahmias

+11

"이 사이트에 가서 그것을 알아낼"호기심에서 –

말을 반대로 코드를 제공하십시오, 왜이 : 실제로 같은 작품겠습니까

.section.section-test:last-of-type

해당 페이지의'head'에있는'div' 요소 ..? –

질문과 관련된 코드를 게시하십시오. 이상적으로 ** 질문 본체 자체의 코드에 ** 또한 문제의 [jsFiddle] (http://jsfiddle.net/api/post/jquery/1.7.1/) 예제를 추가하십시오. 그것은 우리가 당신을 도울 수 있도록 도와 줄 것입니다. –

의 클래스 만 요소의 유형 보면 의사 클래스의 :nth-of-type() 가족이 없습니다. 클래스 선택기 나 다른 선택기로 필터링하지 않습니다. 따라서

, 명령문 :

나는 같은 분명히 요소에 :last-of-type을 적용하고있다. 최종 체크 아웃 div.info

모순이 있습니다. 그 후에 div.center이 있습니다. 은 div.info이 아니며이 마지막으로 div이됩니다.

You cannot currently use CSS selectors to find your last div.info; 여분의 클래스를 추가하거나 JavaScript를 사용해야합니다.

div.info:last-of-type

div:last-of-type.info

:last-of-type이 div 아닌 .info을 타격하고, .info는 0에 발견 된 결과를 제한하고이 2

출처

2012-04-20 21:13:40 BoltClock

CSS에 대해 가장 일반적인 오해 중 하나가 있습니다. CSS는 왼쪽에서 오른쪽으로 읽지 않지만 오른쪽에서 왼쪽으로 읽습니다!

의미, 브라우저는 div.info:last-of-type을 찾을 것이다, 그래서 브라우저는 다음과 같은 순서로 요소를 필터링합니다 :

이 info

의 클래스는 각 유형 (태그 이름)의

마지막 요소는
했습니다 a div.

귀하의 요소가 이러한 순서로 이러한 조건을 충족하지 못합니다. 그것은 정보의 클래스와 마지막 DIV 될 수 있지만 에는 마지막 요소, 즉, 그 태그 이름을 info

출처

2012-04-20 21:08:18

오른쪽에서 왼쪽 순서가 이런 식으로 적용됩니다 (CSS4 선택기가 @Zeta를 엉망으로 만들지는 않습니다) - [this] (http://stackoverflow.com/a/10108700/106224) 및 [ this] (http://stackoverflow.com/a/5813672/106224), 특히 마지막 단락에서는 일부 단순 선택자가 특별히 취급되며 모든 것이 엄격하게 오른쪽에서 왼쪽으로 진행되는 것은 아닙니다. – BoltClock

@ BoltClock'aUUnicorn : 주목 받았다. 나는 마침내 '$ ($);'을 사용하는 것이 좋다고 누군가에게 말하기 전에 오늘 로그 오프 할 시간이라고 생각한다. ... – Zeta

@ BoltClock'saUnicorn : 정확히 어떻게되는지. 네가 준 대답은 내 대답 만 승인한다. 의사 요소가 먼저 읽혀 지므로 요소 목록을 좁혀 스캔이 크게됩니다. 성능 향상을 위해 완료되었습니다. –

은 동일합니다.

또 다른 예 : .section:last-of-type.section-test이

출처

2015-11-30 14:32:01

: last-of-type 의사 클래스가 예상대로 작동하지 않습니다.

답변

관련 문제