如何使用CSS选择除最后一个之外的所有子元素？

最新推荐文章于 2024-05-01 10:55:50 发布

weixin_45587319

最新推荐文章于 2024-05-01 10:55:50 发布

阅读量1.8w

点赞数 6

分类专栏： css 文章标签： css

原文链接：https://www.html.cn/qa/css3/10357.html

版权

css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

在设计和开发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>