[css] CSS : not (: last-child) : 애프터 셀렉터

다음과 같은 스타일의 요소 목록이 있습니다.

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

스 니펫 확장

CSS를 사용하여 마지막 요소를 제외한 모든 요소를 선택하는 방법을 아는 사람이 있습니까?

여기 에서 :not()선택기 의 정의를 볼 수 있습니다

답변

not selector에 문제가 있다면, 그것들을 모두 설정하고 마지막 것을 재정의 할 수 있습니다

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

또는 이전에 사용할 수 있다면 마지막 자녀가 필요하지 않습니다.

li+li:before
{
  content: '| ';
}

답변

모든 것이 올바른 것 같습니다. 사용한 것 대신 다음 CSS 선택기를 사용할 수 있습니다.

ul > li:not(:last-child):after

답변

글로 작성된 귀하의 예는 Chrome 11에서 완벽하게 작동합니다. 브라우저가 :not()선택기를 지원하지 않습니까?

이 크로스 브라우저를 수행하려면 JavaScript 또는 이와 유사한 것을 사용해야합니다. jQuery 는 선택기 API에서 : not () 을 구현 합니다.

답변

CSS를 사용한 예제

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }

답변

나를 위해 그것은 잘 작동

&:not(:last-child){
            text-transform: uppercase;
        }

답변

IE에서 샘플이 작동하지 않으면 콘텐츠 CSS 속성을 사용하려면 IE에서 페이지를 표준 방식으로 렌더링하려면 문서에서 Doctype 헤더 를 지정해야 합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

두 번째 방법은 CSS 3 선택기를 사용하는 것입니다

li:not(:last-of-type):after
{
    content:           " |";
}

그러나 여전히 Doctype을 지정해야합니다.

그리고 세 번째 방법은 JQuery를 다음과 같은 스크립트와 함께 사용하는 것입니다.

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

세 번째 방법의 장점은 doctype을 지정할 필요가 없으며 jQuery가 호환성을 처리한다는 것입니다.

답변

마지막 자식 전 :과 이후를 제거하고 사용

 ul li:not(last-child){
 content:' |';
}

잘하면, 그것은 작동해야합니다