[css] 마지막 자식 선택기 사용
내 목표는 마지막에 CSS를 적용하는 li것이지만 그렇지 않습니다.
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>마지막 자녀 만 선택하려면 어떻게 해야합니까?
답변
:last-childpseudoclass는 여전히 안정적으로 브라우저에서 사용할 수 없습니다. 특히 Internet Explorer 7과 Safari 3.2 가 이상하게 도 지원 하지만 Internet Explorer 버전 <9 및 Safari <3.2는 확실히 지원하지 않습니다 .:first-child
가장 좋은 방법은 last-child해당 항목에 (또는 유사한) 클래스 를 명시 적으로 추가하고 li.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
답변
목록 항목의 수가 고정되어 있으면 인접한 선택기를 사용할 수 있습니다. 예를 들어 세 개의 <li>요소 만있는 경우 다음을 사용 하여 마지막 항목 <li>을 선택할 수 있습니다 .
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}답변
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>두 방법 모두 다른 방법보다 낫지 않으며 개인적인 취향에 달려 있습니다.
