이 스타일을 추가하면 다른 항목을 수정할 필요가 없습니다.
#navlist li:last-child { border-right:0px; }
편집하다:
원본 스크립트
jsbin.com은 3 개월 동안 보지 않은 콘텐츠를 삭제할 수 있으므로 답변이 적용되는 원본 스크립트가 여기에 게시됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-right:1px solid red;
}
/* !!!!!!!!!!!!!! PASTE ANSWER HERE TO MAKE THE FIX !!!!!!!!!!!!!!!! */
</style>
</head>
<body>
<p>Hello from JS Bin</p>
<p id="hello"></p>
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</body>
</html>
저는 CSS3 나 JavaScript없이 항상 이것을합니다. 당신이해야 할 일은 플로팅 li하고 고급 선택기를 사용하는 것입니다 +.
<style>
ul li {
float: left;
border: none; }
li + li {
border-left: 1px solid #F00; }
</style>
이것은 첫 번째 li가 국경을 갖지 못하게 할 것 입니다.
CSS3 사용
지난 제거하려면 <li>A의를<ul>
ul li:last-child {
border:none;
}
CSS를 사용하여 모든 작업을 수행하지만이 경우 사용 :last-child은 브라우저간에 호환되지 않습니다 (IE 문제 만 발생했습니다).
스타일링을 위해 JavaScript를 사용하는 것을 주저하지 않지만 CSS가 모든 브라우저에서 트릭을 수행 할 수없는 경우에만 가능합니다.
이 작업을 수행하는 두 가지 방법이 있습니다. 첫 번째 <li>는 <ul>목록의 마지막 모든 항목에 클래스를 추가하는 것이 좋습니다 . 이것은 서버 측에서 수행 할 수 있지만, 저는 서버 측 코딩 전문가가 아니므로 jQuery를 사용하면 다음과 같은 간단한 코드를 작성할 수 있습니다.
$("ul li:last-child").addClass("noborder");
그러면 noborder.NET 내부의 모든 마지막 항목에 클래스가 추가됩니다 ul. jQuery는 JavaScript CSS 선택기 엔진을 사용하므로 더 복잡한 선택기를 사용하고 모든 브라우저에서 작동하도록 할 수 있습니다. 관심이 있다면 독립형 엔진 Sizzle 에 대해 읽어야합니다 .
모든 마지막 항목에 인라인 스타일을 추가 할 수도 있지만 작동하는 경우 위 코드를 사용하는 것이 좋습니다.
를 사용 $.css()하면 항목에 직접 스타일을 추가 할 수 있습니다.
$("ul li:last-child").css("border-right", "0");
동일한 선택기를 사용하여 항목을 찾습니다.
jQuery를 사용하는 것을 좋아하지 않는다면 순수한 JavaScript 코드를 작성하여 동일한 효과를 얻을 수 있지만 왜 귀찮게할까요?
-------------------속성이 CSS3에 first-child있기 때문에 사용할 수 있습니다 last-child.
#navlist li:first-child { border-left:0; }
링크 아래 확인 : http://www.quirksmode.org/css/contents.html
이제 코드 아래를 확인하십시오.
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-left:1px solid red
}
#navlist li:first-child{border-left:none}<p>Hello from JS Bin</p>
<p id="hello"></p>
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>다음과 같이 jQuery를 시도해 보겠습니다.
$("#myDiv ul li:last-child").addClass("lastLi");
lastLi클래스에서 li테두리 너비를 0으로 설정 해야합니다 .
다음은 jQuery last-child선택기 문서에 대한 링크입니다 . http://docs.jquery.com/Selectors/lastChild
이렇게 사용
li:nth-child(){ border-left:none;}
노트
li위치 번호 (예 : 3, 4 또는 5)를 안에 넣으십시오 (). 또한 왼쪽 또는 오른쪽 테두리를 조작합니다.
div p { display:inline-block; background:darksalmon; padding:4px;
border-left:13px solid silver; }
div p:first-of-type { color:#fff; border-left:13px solid magenta; }
li { border-right:2px solid blue;
display:inline-block;padding:7px; background:skyblue;color:#fff;
}
ul li:nth-last-of-type(2) + li {
background:hsla(80,100%,60%,0.16);
border-right:none;
color:#000000;
} <h1>both universal solid style for
<i style='color:#1AB9FC'>Left or Right</i> border remove
</h1>
<div>
<h3 style="color:olive; text-align:center;">Target rightborder</h3>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<br>
<ul>
<li>li-1</li>
<li>li-2</li>
<li>li-3</li>
<li>li-4</li>
<li>li-5</li>
<li>li-6</li>
</ul>
<h3>Remove left border</h3>
<p><b>Note: </b><span>Last <code>li</code> always selected if you increase the <code>li</code> items in future</span></p>출처
https://stackoverflow.com/questions/2005941