이 글에서는 특정 CSS 스타일을 제거하기 위해 li의 마지막 줄을 구현하는 CSS3의 not() 선택기 코드를 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 일상적인 개발 루프의 마지막 li가 다른 li과 다른 경우가 종종 있습니다. 특정 CSS 스타일을 제거하기 위해 이 기사에서는 CSS3의 새로운 :not() 의사 클래스 선택기를 사용하는 방법을 소개합니다. 관심있는 친구들은 꼭 오셔서 아래를 살펴보세요.
이 기사에서 사용되는 것은 선택기를 포함하지 않는 요소와 일치시킬 수 있는 CSS3의 새로운 :not() 의사 클래스 선택기입니다. 목록이 있다고 가정하고 각 목록 항목에는 결론이 있지만 마지막 항목에는 결론이 필요하지 않습니다
예제 코드는 다음과 같습니다.<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>使用:not() 最后一行li不添加边框</title>
<style type="text/css"></p>
<p>/*
使字体在所有设备上都达到最佳的显示
*/
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}</p>
<p>/*
给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;
}</p>
<p>/*
设置列表
*/
.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></p>
<p><body></p>
<p> <p class="listItem">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</p>
</body>
</html>
관련 권장 사항:
CSS3의 UI 요소 상태 의사 클래스 선택기 분석CSS3의 기본 의사 클래스 선택기 분석위 내용은 CSS3의 not() 선택기는 특정 CSS 스타일을 제거하기 위해 li 코드의 마지막 줄을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!