답변:
:last-childpseudoclass는 여전히 안정적으로 브라우저에서 사용할 수 없습니다. 특히 Internet Explorer 7과 Safari 3.2 가 이상하게 도 지원 하지만 Internet Explorer 버전 <9 및 Safari <3.2는 확실히 지원하지 않습니다 .:first-child
가장 좋은 방법은 last-child해당 항목에 (또는 유사한) 클래스 를 명시 적으로 추가하고 li.last-child대신 적용하는 것입니다.
:last-child .
당신에게 효과가있는 또 다른 해결책은 관계를 바꾸는 것입니다. 따라서 모든 목록 항목의 테두리를 설정합니다. 그런 다음 first-child를 사용하여 첫 번째 항목의 테두리를 제거합니다. 첫 번째 자식은 모든 브라우저에서 정적으로 지원됩니다 (즉, 다른 코드를 통해 동적으로 추가 할 수 없지만 첫 번째 자식은 CSS2 선택기이고 마지막 자식은 CSS3 사양에 추가됨).
참고 : 예와 같이 목록에 항목이 2 개만있는 경우에만 의도 한대로 작동합니다. 세 번째 항목 이상에는 테두리가 적용됩니다.
Javascript를 사용할 수 있다고 생각하면 jQuery 지원 이후 last-childjQuery의 CSS 방법을 사용할 수 있으며 거의 모든 브라우저를 지원할 수 있습니다.
예제 코드 :
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})여기에 대한 자세한 정보를 찾을 수 있습니다. http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')스타일 시트에서 스타일을 유지할 수 있도록 이와 같은 작업을 수행하는 것이 좋습니다 .
div:last-child및 div.last-child. :last-child구문이 유효하지 않은 것으로 간주하고 해당 의사 선택기가있는 모든 클래스가 적용되지 않는 것으로 보입니다 .
CSS3 선택기를 자주 원하는 경우 사이트에서 항상 selectivizr 라이브러리를 사용할 수 있습니다.
거의 모든 CSS3 선택기를 지원하지 않는 브라우저에 대한 지원을 추가하는 JS 스크립트입니다.
<head>IE 조건부로 태그 에 넣으십시오 .
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->클래스를 사용하는 대신 세부 목록을 사용하여 자식 dt 요소에 한 스타일을 지정하고 자식 dd 요소에 다른 스타일을 지정할 수 있습니다. 귀하의 예는 다음과 같습니다.
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}html :
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>두 방법 모두 다른 방법보다 낫지 않으며 개인적인 취향에 달려 있습니다.
요소를 부동하는 경우 순서를 반대로 할 수 있습니다.
즉 float: right;대신float: left;
그런 다음이 메서드를 사용하여 클래스의 첫 번째 자식을 선택합니다.
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}이것은 현재 역순이기 때문에 실제로 LAST 인스턴스에만 클래스를 적용합니다.
다음은 실제 작동하는 예입니다.
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
:last-child둘 다 지원하지 않습니다 . 그리고 그것은 아니에요 그 호기심.:first-childCSS2 의사 클래스,:last-childCSS3 의사 클래스입니다.