在设计和开发Web应用程序时，有时我们需要选择除最后一个元素之外的元素内的所有子元素，那么如何使用CSS来选择元素中除最后一个之外的所有子元素？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。
要使用CSS选择元素中除最后一个之外的所有子元素，可以使用使用:not和:last-child选择器。
语法：
element:not(:last-child) {
// CSS样式
}
:not(selector) 选择器：用来匹配非指定元素/选择器的每个元素。
:last-child选择器：用来匹配父元素中最后一个子元素。
示例1：创建一个导航菜单，除最后一个元素外，菜单之间用右边框分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
nav {
margin: 30px;
}
nav a {
text-transform: capitalize;
text-decoration: none;
color: rgba(222, 128, 27);
font-family: sans-serif;
font-size: 20px;
padding: 10px 10px;
margin-top: 30px;
width: 150px;
text-align: center;
display: inline-block;
}
nav a:not(:last-child) {
border-right: 5px solid palevioletred;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Articles</a>
<a href="#">Contact Me</a>
</nav>
</body>
</html>
效果图：
示例2：创建导航菜单，除最后一个元素之外，其他菜单添加一些CSS属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
nav {
margin: 30px;
}
nav a {
text-transform: capitalize;
text-decoration: none;
color: rgba(60, 60, 60);
font-family: sans-serif;
font-size: 20px;
padding: 10px 10px;
margin-top: 30px;
width: 150px;
text-align: center;
display: inline-block;
border: 2px solid black;
border-radius: 5px;
}
nav a:not(:last-child) {
background-color:peachpuff;
color: white;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Articles</a>
<a href="#">Contact Me</a>
</nav>
</body>
</html>
效果图：
推荐阅读：
php服务器
php5下载
layui框架