.class : last-of-type이 작동하지 않는 이유는 무엇입니까?

.class : last-of-type이 작동하지 않는 이유는 무엇입니까?

---

이것이 작동하지 않는 이유는 무엇입니까? http://jsfiddle.net/84C5W/1/

<style>
   p{
     display : none;
   }
   p.visible:last-of-type {
     display : block;
   }​
</style>
<div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p class="">This should be hidden</p>
</div>

사실 내 <p>는 보이지 않습니다. 스타일 시트에서 ".visible"에 대한 참조를 제거하면 div의 마지막 <p>가 표시되지만 원하는 것은 아닙니다.

물론 나는 항상 하나의 ".visible"만 유지할 수 있었지만 이것은 reveal.js 프리젠 테이션을위한 것이며 javascript를 제어 할 수 없습니다. 스타일 시트 만 ...

편집 : 좋아, 분명히 .class : last-of-type은 작동하지 않습니다. @Justus Romijn이 말했듯이 : last-of-type 가상 클래스는 요소를 선택하기 위해 설계되었습니다 (내 생각에는 엄청나게 제한적이며이 특정 가상 클래스를 다소 쓸모없는 상태에 둡니다).

어쨌든,이 시점에서 내 질문을 다시 말하고 싶습니다. ".visible"클래스로 div 내부의 마지막 요소를 어떻게 선택할 수 있습니까? 나는 이것을 위해 Javascript를 사용하고 싶지 않습니다.

---

몇 가지 테스트를 수행했지만 last-of-type선택기는 클래스 이름이 아닌 노드 선택기에서만 작동합니다.

HTML :

<p class="visible">First paragraph.</p>
<p class="visible">Second paragraph.</p>
<p>Third paragraph.</p>

CSS :

p:last-of-type{
  /* this will be applied in the third paragraph bacause the pseudo-selector is applied  to nodes only */
  font-weight: bold;
}
p.visible:last-of-type {
  /* this does not get applied, because you are using the pseudo-selector with a class. */
  display: block;
}

로부터 W3C :

: last-of-type 가상 클래스는 부모 요소의 자식 목록에서 해당 유형의 마지막 형제 요소를 나타냅니다.

형제 여야하므로 다른 요소와 혼합 할 수 있기 때문에 클래스 이름을 무시합니다.

뒤에 또는 부모 선택 자가없는 이유는 무엇 입니까? 이는 페이지에서 동적으로 하나의 클래스 이름 만 변경함으로써 잠재적으로 많은 웹 페이지를 메모리 잠금 할 수 있습니다. CSS3 선택기를 광범위하게 사용하는 것은 이미 브라우저에서 무겁기 때문에 권장되지 않습니다.

Dave Hyatt는 2008 년 WebKit 구현 작업을하는 동안 이러한 구현을 피하는 몇 가지 이유를 언급했습니다 .

부모 선택기를 사용하면 실수로 문서 전체에 그루브를 일으키는 것이 매우 쉽습니다. 사람들은이 선택기를 오용 할 수 있으며 오용 할 것입니다. 그것을 지원하는 것은 사람들에게 매달릴 수있는 많은 밧줄을주는 것입니다.

CSS3 선택기에 대한 슬픈 진실은 페이지 성능에 관심이 있다면 전혀 사용해서는 안된다는 것입니다. 마크 업을 클래스와 ID로 꾸미고 순전히 그것들에 매칭시키면서 형제, 자손 및 자식 선택 자의 모든 사용을 피하면 실제로 모든 브라우저에서 페이지 성능이 크게 향상됩니다.

---

문제는 :last-of-type요소 선택자와 만 일치 한다는 것입니다. 귀하의 예에서는 class선택자를 일치 시키려고합니다 . 그것이 작동하지 않는 이유입니다.

예 : http://dabblet.com/gist/4144885

---

두 번째 마지막 태그를 타겟팅합니다.

.visible:nth-last-of-type(2) {}

---

향후 참조를 위해 CSS 레벨 4에서 다룹니다. https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

Browser support at the moment of writing, is non-existant: http://css4-selectors.com/selector/css4/structural-pseudo-class/

When this is ready, this should be the solution:

p {
  display : none;
}
p.visible:nth-last-match(0) {
  display : block;
}

<div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p class="">This should be hidden</p>
</div>

---

this was the way i got around the non-class problem - its a javascript solution unfortunately:

function lastOfType(className){
        var allElemsOfType = $("."+className);
        if (!allElemsOfType || !allElemsOfType.length) return null;
        else return allElemsOfType[allElemsOfType.length - 1];
}

---

in my case, i made a mistake.

p.visible : last-of-type (x)
p.visible:last-of-type   (o)

just what i i did

참고URL : https://stackoverflow.com/questions/13554552/why-does-classlast-of-type-not-work