마지막 자식 선택기 사용
내 목표는 마지막에 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 버전 <9 및 Safari <3.2는 확실히 지원하지 않지만 Internet Explorer 7 및 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]-->
마지막 자식 의사 클래스가 IE 에서 작동하지 않습니다.
클래스를 사용하는 대신 세부 목록을 사용하여 자식 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>
Neither method is better than the other and it is just down to personal preference.
Another way to do it is using the last-child selector in jQuery and then use the .css() method. Be weary though because some people are still in the stone age using JavaScript disabled browsers.
Why not apply the border to the bottom of the UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}
If you are floating the elements you can reverse the order
i.e. float: right; instead of float: left;
And then use this method to select the first-child of a class.
/* 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;
}
This is actually applying the class to the LAST instance only because it's now in reversed order.
Here is a working example for you:
<!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>
It's hard to say without seeing the rest of your CSS, but try adding !important in front of the border color, to make it like so:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
참고URL : https://stackoverflow.com/questions/1293369/using-the-last-child-selector
'Programming' 카테고리의 다른 글
| Sublime Text Editor에서 특정 확장자를 가진 파일을 숨기시겠습니까? (0) | 2020.08.08 |
|---|---|
| 명령 줄의 프로세서 / 코어 수 (0) | 2020.08.08 |
| Java에서 현재 날짜를 문자열로 변환하는 방법은 무엇입니까? (0) | 2020.08.08 |
| 선언되지 않은 식별자 'kUTTypeMovie'사용 (0) | 2020.08.08 |
| 사전과 해시 테이블의 차이점 (0) | 2020.08.08 |