如何使⽤CSS选择除最后⼀个之外的所有⼦元素？
在设计和开发Web应⽤程序时，有时我们需要选择除最后⼀个元素之外的元素内的所有⼦元素，那么如何使⽤CSS来选择元素中除最后⼀个之外的所有⼦元素？下⾯本篇⽂章就来给⼤家介绍⼀下，希望对⼤家有所帮助。
要使⽤CSS选择元素中除最后⼀个之外的所有⼦元素，可以使⽤使⽤:not和:last-child选择器。
语法：css怎么创建
element:not(:last-child){
// CSS样式
}
:not(selector) 选择器：⽤来匹配⾮指定元素/选择器的每个元素。
:last-child选择器：⽤来匹配⽗元素中最后⼀个⼦元素。
⽰例1：创建⼀个导航菜单，除最后⼀个元素外，菜单之间⽤右边框分隔
<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属性。
<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>
效果图：
推荐阅读：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。