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

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

效果图:

1562307103994685.png

示例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>

效果图:

1562307402401550.png

以上就是如何使用CSS选择除最后一个之外的所有子元素?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏