집 > 기사 > 웹 프론트엔드 > CSS3 :not() 의사 클래스 선택기의 사용 예에 대한 자세한 설명

CSS3 :not() 의사 클래스 선택기의 사용 예에 대한 자세한 설명

零下一度원래의: 2017-05-05 15:41:551820검색

CSS3의 새로운 :not() 의사 클래스 선택기는 선택기를 포함하지 않는 요소와 일치합니다. 목록이 있다고 가정해 보겠습니다. 각 목록 항목에는 결론이 있지만 마지막 항목에는 결론이 필요하지 않습니다.

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>使用:not() 最后一行li不添加边框</title>
<style type="text/css">

/*    
    使字体在所有设备上都达到最佳的显示
*/
html { 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
}

/*
    给body添加阴影
*/
body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}

/*
    设置列表
*/
.listItem {
    border: 1px solid red;
}

.listItem ul {
    width: 100%;
    overflow:hidden;
}

.listItem ul,listItem li {
    margin:0;
    padding:0;
    list-style:none;

}
.listItem li {
   margin-left:10px;
}
/*
    li 最后一个元素不添加边框
*/
.listItem li:not(:last-child) {
    border-bottom:1px solid green;        
}

/*
    与第一个li相连兄弟
*/
.listItem  li:first-child ~ li { border-left: 1px solid #666; }

</style>
</head>

<body>

    <p class="listItem">
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表5</li>
        </ul>
    </p>
</body>
</html>

[관련 권장 사항]

1. 무료 CSS 온라인 동영상 튜토리얼

2. css 온라인 매뉴얼

3. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 CSS3 :not() 의사 클래스 선택기의 사용 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS3에서 디자인 로딩 3가지 예시 코드 공유 (1)다음 기사：CSS3에서 디자인 로딩 3가지 예시 코드 공유 (1)

CSS3 :not() 의사 클래스 선택기의 사용 예에 ​​대한 자세한 설명

관련 기사

CSS3 :not() 의사 클래스 선택기의 사용 예에 대한 자세한 설명