div 클래스의 마지막 아이

div 클래스의 마지막 아이

Wordpress 웹 페이지를 마무리하고 스타일링을 하고 싶다(와 함께).CSS)의 엔트리의 롤Posts페이지. 워드프레스는 다음을 생성합니다.

<div class="entry">

페이지에는 이러한 요소가 로딩되어 있으며, 이들을 구분하기 위해 엔트리 하단의 테두리를 사용했습니다.문제는 마지막 엔트리에 이 테두리를 넣지 않았으면 한다는 것입니다.CSS에서 이와 같은 작업을 수행할 수 있습니까? (목록이 아니기 때문에 의사 클래스는 사용할 수 없습니다.)

여기 제 CSS가 있습니다. 아주 간단합니다.

.entry{  border-bottom: 1px solid yellow; }

HTML:

<div id="wrapper">
  <br />
  there are loads of code
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  another huge code
  <br />
</div>

잘 부탁드립니다.

찾으시는 제품의 이름을 이미 지정하셨습니다.last-child: http://reference.sitepoint.com/css/pseudoclass-lastchild

사용방법.entry:not(:last-child) { border-bottom: 1px solid yellow; }

리스트가 아니기 때문에 의사 클래스는 사용할 수 없습니다.)

JSYK, 의사 클래스는 포함된 요소가 리스트인 것에 의존하지 않습니다.만약 네가 그 기말고사가.entry요소는 실제로 해당 컨테이너의 마지막 하위 항목이 아니므로 계속 선택할 수 있습니다.하지만 실제 가격이 어떻게 나오는지 보여주지 않으면 어떻게 하는지 말해줄 수 없어요.

기말고사가div.entry그 뒤에 다른 div가 이어지지 않습니다.그 다음 셀렉터.entry:not(:last-of-type)효과가 있을 겁니다.

.entry:last-child {
  border-bottom: none;
}

예를 들어 리스트가 있다고 칩시다.<li>링크 포함<a>그리고 넌 그걸 마지막으로 갖고 싶어해<a>의<li>s. 사용방법

.entry:last-child a {
  border-bottom: none;
}

이 조작에 의해, 마지막이 선택됩니다..entry대상 링크

매우 심플한 솔루션:

#wrapper :last-child
{
    border:none;
}

가장 포괄적인 브라우저 지원을 위해 다음을 사용할 것을 권장합니다.

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }

언급URL : https://stackoverflow.com/questions/12959655/last-child-of-div-class